동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
요소 : 가운데 정렬(수평)
<div>와 같은 블록요소를 가로로 가운데에 배치하려면 margin:auto; 을 사용합니다.
요소의 너비를 설정하면 해당 요소의 가장자리까지 늘어나지 않습니다.
요소는 지정된 너비를 차지하고 나머지 공간은 두 여백(margin) 사이에서 균등하게 분할됩니다.
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}** width속성을 설정하지 않으면 (또는 100%로 설정한 경우) 가운데 맞춤은 효과가 없습니다.
텍스트 : 가운데 맞춤
요소 내부의 텍스트를 가운데 정렬하려면 text-align:center;를 사용하면 됩니다.
.center {
text-align: center;
border: 3px solid green;
}이미지 중앙 정렬
이미지를 가운데 배치하려면 margin:auto;을 사용하고 블록 요소로 만들면 됩니다.
img {
display: block;
margin: auto;
width: 40%;
}좌우 정렬 - 위치 사용
요소를 정렬하는 한가지 방법은 다음을 사용하는 것입니다. position:absolute;
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}** 절대 위치된 요소는 정상 흐름에서 제거되며 요소가 겹칠 수 있습니다.
** position을 갖고 요소를 정렬할 때 body요소에 margin과 padding을 항상 정의합니다. 이것은 브라우저마다 시각적인 차이를 피하기 위한 것입니다.
position속성을 사용할 때 IE8이하 버전에서 문제가 있습니다.
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}좌우 정렬 - float 사용
요소를 정렬하는 또 다른 방법은 다음과 같이 float속성을 사용하는 것입니다.
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}float을 가지고 요소 정렬을 할 때, 항상 <body>에 margin과 padding을 정의해야 합니다. 이것은 브라우저마다 시각적인 차이를 피하기 위한 것입니다.
IE8이하 버전에서는 문제가 있습니다. !DOCTYPE선언이 없는 IE8이하 버전에서는 오른쪽에 17픽셀의 여백을 추가합니다. 이 공간은 스크롤바를 위해 예약된 것 같습니다. 따라서 float속성을 사용할 때 항상 DOCTYPE선언을 설정해야 합니다.
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}수직 중심 - padding 사용
CSS에서 요소를 세로로 가운데에 배치하는 방법은 여러가지가 있습니다. 간단한 해결책은 위쪽과 아래쪽에 padding속성을 사용하는 것입니다.
.center {
padding: 70px 0;
border: 3px solid green;
}수직 중심 - line-height사용
또 다른 속임수는 line-height속성과 동일한 값으로 height속성을 사용하는 것입니다.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}수직 중심 - position & transform 사용
세 번째 솔루션은 position과 transform속성을 사용하는 것입니다.
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}등록된 댓글이 없습니다.