CSS: inline-block 요소를 세로로 가운데 정렬하는 방법
웹 개발을 하다 보면, 요소를 세로로 가운데 정렬하는 경우가 자주 발생합니다. 특히 inline-block 요소를 사용할 때, 이를 세로로 가운데 정렬하는 방법을 이해하는 것이 중요합니다. 이번 포스트에서는 vertical-align 속성과 helper 요소를 사용한 방법, 그리고 Flexbox를 이용한 대안적인 방법을 소개합니다.
vertical-align과 helper 요소를 사용한 방법
vertical-align 속성은 주로 텍스트와 이미지를 포함하는 인라인 요소들 사이에서의 정렬을 제어합니다. 이를 inline-block 요소에 적용하여 세로로 가운데 정렬하려면 보조 요소가 필요합니다. 이 보조 요소는 전체 높이를 차지하면서 같은 라인에 있어야 합니다.
예제
다음은 helper 요소를 사용하여 info-container를 세로로 가운데 정렬하는 예제입니다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Center Alignment with Helper</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="info col">
<div class="helper"></div>
<div class="info-container">
<div class="label">Portfolio</div>
<h2>Make Hardware Soft</h2>
<p>IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features. It naturally blends into your life through lean UX and minimal design.</p>
</div>
</div>
</body>
</html>CSS 코드
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.info {
width: 100%;
height: 320px;
background-color: white;
text-align: center; /* 수평 가운데 정렬 */
position: relative; /* 필요한 경우 */
}
.info .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.info .info-container {
display: inline-block;
padding-left: 30px;
padding-right: 30px;
vertical-align: middle;
text-align: left; /* 텍스트를 왼쪽으로 정렬 */
}
.info .label {
font-size: 16px;
color: #4a4a4a;
}설명
.info요소는 부모 컨테이너로, 높이가 320px로 설정됩니다..helper요소는inline-block으로 설정되어 부모 요소의 전체 높이(320px)를 차지합니다..info-container요소는inline-block으로 설정되어vertical-align: middle을 사용하여.helper요소와 함께 세로로 가운데 정렬됩니다.
이 방법은 인라인 요소들이 같은 라인에 있어야 vertical-align 속성이 제대로 작동하기 때문에 .helper 요소가 필요합니다.
Flexbox를 사용하는 대안적인 방법
Flexbox를 사용하면 helper 요소 없이도 더 간단하게 요소를 세로로 가운데 정렬할 수 있습니다. Flexbox는 더 직관적이고 코드가 간결하여 최근에는 많이 사용되는 방법입니다.
Flexbox를 사용하는 예제
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="info col">
<div class="info-container">
<div class="label">Portfolio</div>
<h2>Make Hardware Soft</h2>
<p>IN'O is a hanger-type bluetooth speaker that does not merely focus on its audio features. It naturally blends into your life through lean UX and minimal design.</p>
</div>
</div>
</body>
</html>CSS 코드
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.info {
width: 100%;
height: 320px;
background-color: white;
display: flex;
align-items: center; /* 세로 가운데 정렬 */
justify-content: center; /* 필요시 수평 가운데 정렬 */
padding-left: 30px;
padding-right: 30px;
}
.info .info-container {
text-align: left; /* 텍스트를 왼쪽으로 정렬 */
}
.info .label {
font-size: 16px;
color: #4a4a4a;
}설명
.info요소에display: flex;를 설정하여 Flexbox 컨테이너로 만듭니다.align-items: center;를 사용하여 자식 요소를 세로로 가운데 정렬합니다.justify-content: center;를 추가하여 필요시 수평으로도 가운데 정렬할 수 있습니다.
결론
vertical-align 속성을 사용한 방법과 Flexbox를 사용한 방법 모두 각각의 장단점이 있습니다. vertical-align 속성은 레거시 코드나 특정 상황에서 유용할 수 있지만, Flexbox는 더 직관적이고 간편합니다. 가능하다면 Flexbox를 사용하는 것이 좋습니다.
이 포스트를 통해 inline-block 요소를 세로로 가운데 정렬하는 두 가지 방법을 이해하고, 프로젝트에 맞는 방법을 선택할 수 있기를 바랍니다.
