Programming/기본 (Baisc)

[HTML] ul > li 구조에서 세로 가운데 정렬(Vertical-align) 하는 방법

YH.Dream 2023. 10. 16. 21:18

1. 개요 

  ul > li 목록형 구조 작성 과정에서  세로 정렬이 되지 않아, 여러 방법을 찾아 보던 중 가장 HTML가 친숙하고

  쉬운 방법으로 세로 정렬 구성을 할 수 있는 방법을 찾아 기록한다.

2. 작성 방법

* ul > li 구조로 만든 목록

1)  CSS 구성

   "li:before" 구성을 하게되면  "display: inline-block"을 통해 최초 초기 설정을 해준다.

   content "싱글쿼터"를 넣게되면 기본 사이즈가 지정된다.

ul li:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%;
}

ul li {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid blue;
}

2) HTML 태그는 특이사항 없이 div > ul >li 구조도이다.

테스트 데이터 입니다.
  • 1
  • 2
  • 3
  • 4
  • 5
<!DOCTYPE>
<html>
	<head>
    	<title>테스트 데이터 입니다.</title>
        <style>
        	div.box {
            	width:50%;
                height:50%;
            }
            ul.boxList {
            	width:100%;
                height:100%;
            }
            
            ul.boxList li:before { 
                display: inline-block;
                vertical-align: middle;
                content: '';
                height: 100%;
            }
            
            ul.boxList li {
                width: 100%;
                height: 38px;
                border: 1px solid blue;
                background-color: #b3bab9;
                text-align: center;
                font-weight: 500;
                color: red;
            }
        </style>
    </head>

	<body>
    	<div class="box">
        	<ul class="boxList">
            	<li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </body>
</html>
저작자표시 비영리 변경금지