본문 바로가기
HTML/CSS문법

CSS 수평, 수직 정렬

by flycoding 2023. 8. 27.
반응형

요소 가운데 정렬

블록 요소(<div>와 같은)를 수평으로 중앙에 놓으려면 margin: auto; 를 사용한다.

요소의 너비를 설정하면 컨테이너의 가장자리까지 늘어나는 것을 방지할 수 있다.

그러면 요소가 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 동일하게 분할된다:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>가운데 정렬 요소</h2>
<p>블록 요소(예: div)를 수평으로 중앙에 놓으려면 마진: auto; 를 사용한다</p>

<div class="center">
  <p>Hello World!</p>
</div>

</body>
</html>

'center' 클래스 요소를 가운데 정렬하려면 margin:auto 를 설정한다. 위의 코드를 실행하면 아래와 같은 그림과 같이 출력된다.

CSS margin:auto 설정 가운데정렬

 

텍스트 가운데 정렬

텍스트를 요소 내부에 중앙에 배치하려면 text-align: center; 를 사용한다.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>텍스트 가운데정렬</h2>

<div class="center">
  <p>나는 가운데이다.!!!.</p>
</div>

</body>
</html>

center 클래스에 text-align;center; 값으로 설정하면 아래 그림과 같이 텍스트가 가운데 정렬되어 표시된다.

CSS text-align:center; 설정 텍스트 가운데정렬 화면 예시

 

이미지 가운데 정렬

이미지의 중앙을 맞추려면 margin-left, margin-right 을 auto로 설정하고 display를 block 으로 설정한다.:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>이미지 가운데 정렬</h2>
<p>이미지의 중앙을 맞추려면 margin-left, margin-right 을 auto로 설정하고 display를 block 으로 설정한다.:.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>

img 요소에 display:block, margin-left:auto, margin-right:auto로 설정하면 이미지가 가운데 정렬되며 위의 코드를 실행하면 아래 그림과 같다.

css 이미지 가운데정렬

 

왼쪽, 오른쪽 정렬-position 활용

요소를 정렬하는 한 가지 방법은 position: absolute; 를 사용하는 것입니다::

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>position속성을 활용하여 오른쪽 정렬</h2>

<p>요소를 위치 특성과 오른쪽으로 정렬하는 방법의 예:</p>

<div class="right">
  <p>내가 어렸을 때 그리고 더 연약했던 시절에 아버지는 내가 그 이후로 내 마음속에서 뒤집고 있는 몇 가지 조언을 해 주었습니다.</p>
</div>

</body>
</html>

right 클래스에 position:absolute 값으로 설정하고 right:0px로 오른쪽 정렬을 한다.

위의 코드를 실행한 결과는 아래 그림과 같이 div 요소는 오른쪽으로 정렬된 것을 확인할 수 있다.

CSS position:absolute, right 오른쪽 정렬 결과 화면

 

float을 활용한 왼쪽, 오른쪽 정렬 

요소를 정렬하는 또 다른 방법은 float 속성을 사용하는 것이다:

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>float 속성으로 오른쪽 정렬</h2>

<p>요소를 플로트 속성에 맞게 오른쪽으로 정렬하는 방법의 예y:</p>

<div class="right">
  <p>내가 어렸을 때 그리고 더 연약했던 시절에 아버지는 내가 그 이후로 내 마음속에서 뒤집고 있는 몇 가지 조언을 해 주었습니다.</p>
</div>

</body>
</html>

right 클래스에서 float 속성에 right값을 설정하면 div 요소가 오른쪽 정렬이 되며 아래 그림과 같다.

CSS float:rigth 로 div요소에 오른쪽 정렬 예제

 

clearfix hack

참고: 요소가 포함된 요소보다 크고 플로팅되면 컨테이너 외부에서 넘친다. "clearfix hack"을 사용하여 이 문제를 해결할 수 있다

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>이 이미지는 오른쪽으로 이동합니다. 또한 이 이미지를 포함하는 요소보다 크기 때문에 컨테이너 외부에 넘칩니다:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  한글 '서울'을 서울의 산, 해, 한강으로 나타내면서 전체적으로는 신명나는 사람의 모습을 형상화한 것으로, '인간 중심 도시'를 지향하는 서울을 상징한다. 
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>이 문제를 해결하려면 포함 요소에 clearfix 해킹을 추가합니다:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
 한글 '서울'을 서울의 산, 해, 한강으로 나타내면서 전체적으로는 신명나는 사람의 모습을 형상화한 것으로, '인간 중심 도시'를 지향하는 서울을 상징한다.
</div>

</body>
</html>

img1 클래에서 float:right로 이미지를 오른쪽으로 정렬시 div영역에 넘쳐서 사진이 div 영역 아래로 넘쳐난다.

아래 div class는 clearfix로 설정하여 div영역이 이미지 높이만큼 설정되며 위의 코드를 실행하였을 경우, 아래 그림과 같다.

CSS clearfix::after 설정 div 높이설정

 

padding을 사용하여 수직 정렬

CSS에서 요소를 수직으로 중앙에 배치하는 방법은 여러 가지가 있다. 간단한 해결책은 상단 및 하단 padding 을 사용하는 것이다:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>padding을 활용하여 가운데 수직 정렬</h2>

<p>이 예제에서는 패딩 특성을 사용하여 div 요소를 수직으로 중앙에 배치합니다:</p>

<div class="center">
  <p>가운데 수직 정렬되었습니다.</p>
</div>

</body>
</html>

padding: 70px로 설정하여 글자를 가운데 수직 정렬 배치하였고, 위의 코드를 실행한 결과 화며은 아래 그림과 같다.

CSS padding을 활용한 가운데 수직 정렬 예제

 

수직 및 수평으로 가운데를 맞추려면 padding 과 text-align:center 를 사용한다.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>padding과 text-align을 활용한 가운데 정렬</h2>

<p>이 예제에서는 패딩과 텍스트 정렬을 사용하여 div 요소를 수직 및 수평으로 중앙에 배치합니다:</p>

<div class="center">
  <p>수평, 수직 정렬되어 있습니다.</p>
</div>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS padding, text-align:center 수직, 수평 정렬 예제

 

line-height 를 활용하여 가운데 수직 정렬

또 다른 방법은 height 속성과 동일한 값을 가진 line-height 속성을 사용하는 것이다:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>line-height를 활용한 가운데 정렬(수평, 수직)</h2>

<p>이 예제에서는 높이 속성과 동일한 값을 가진 선 높이 속성을 사용하여 div 요소의 중심을 맞춥니다:</p>

<div class="center">
  <p>수평, 수직 정렬된 텍스트이다.</p>
</div>

</body>
</html>

line-height:200px, text-align;center로 설정하면 'center' 클래스의 div 요소의 텍스트는 수평, 수직 가운데 정렬되어 표시되며 아래 그림과 같다.

CSS line-height를 활용한 가운데 정렬 예제

 

position과 transform 속성을 활용한 수직 가운데 정렬

padding 및 line-height 가 옵션이 아닌 경우에는 position  및 transform 속성을 사용하는 것이 또 다른 해결책이다:

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>position and transform 가운데 정렬</h2>

<p>이 예제에서는 위치 설정 및 변환 특성을 사용하여 div 요소를 수직 및 수평으로 중앙에 배치합니다:</p>

<div class="center">
  <p>수평, 수직 졍렬되었습니다.</p>
</div>

</body>
</html>

position: absolute에 transform:trasnlate(-50%, -50%)로 설정하면 div영역내에 p요소는 수직, 수평 가운데 정렬되며 아래 그림과 같이 표시된다.

CSS position, transform을 활용한 가운데 정렬 예제

 

flexbox를 활용한 가운데 정렬

플렉스박스를 사용하여 사물을 중앙에 배치할 수도 있다. IE10 이전 버전에서는 flexbox가 지원되지 않는다:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
</style>
</head>
<body>

<h2>Flexbox 가운데정렬</h2>

<p>정당화 내용과 정렬 항목 속성이 모두 <em>center </em>로 설정된 컨테이너는 항목을 중앙(양 축 모두)에 정렬합니다.</p>

<div class="center">
  <p>수평, 수직 정렬되었습니다.</p>
</div>

</body>
</html>

'center' 클래스에 display:flex, justify-content:center(수직정렬), align-items: center(수평정렬) 설정으로 수직, 수평 정렬이 되며 아래 그림과 같다. 

CSS flexbox를 활용한 가운데 정렬 예제

 

이상으로 정렬에 대한 다양한 방법들을 알아보고 실습해보았다.

꼭 손으로, 눈으로, 머리로 실습하며 익히기를 바란다.

모두 화이팅입니다.!!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS pseudo-classes  (0) 2023.08.29
CSS combination  (0) 2023.08.28
CSS float 예제  (0) 2023.08.25
CSS clear, clearfix 속성  (0) 2023.08.24
CSS float와 clear  (0) 2023.08.23

관련글

댓글

티스토리툴바