ul태그 센터정렬 어떻게 하나요?
본문
사진에서 보시는 것처럼 비었음 이라는 li와 그를 감싸는 ul태그가 있습니다.
파란영역은 ul영역인데 이게 PC/Mobile 때문에 함부로 ul에 width: 870px;을 줄 수도 없고
(모바일에서 깨져보이기 때문) 방치하자니 파란영역에 오른쪽 부분이 비어있어서 불편하고..ㅠㅠ
어떻게 하면 좋을까요..? 소스는 아래 남깁니다.
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<style>
.main_title{
font-weight: bold;
}
.pb_how,.pb_list{
margin-left: auto;
margin-right: auto;
padding: 0;
display: inline-block;
}
.pb_list{ list-style:none; }
.pb_list > li{ width:145px; height:40px; border:1px solid #000;
box-sizing:border-box; float: left; line-height:40px;}
</style>
<div style="text-align:center;">
<h2 class="main_title">
주택가는 지금 공사중!
</h1>
<p>
<div>
《 주택 신청방법 》
</div>
<ul class="pb_how">
<li>작성중</li>
</ul>
</p><br/>
<p>
<div>
《 주택 놀러가기 》
</div>
<ul class="pb_list">
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
<li>비었음</li>
</ul>
</p>
</div>
답변 4
flex를 활용해 보세요
예시처럼 li 태그를 145px로 하고 3줄로 정렬하고 싶다면
Div display: flex, justify-content:center
Ul display:flex, flex-wrap:wrap, max-width: 435px
Li
Li
Li
Li
모바일로 쓰다 보니 자세히 적지는 못하겠네요.
플렉스를 활용해서 손쉽게 정렬 가능합니다
3열 고정이 아닌 사이트 넓이에 비례해 4열이 될 수도 5열이 될 수도 있게해서 ul을 가운데 정렬하려는데 안되네요 ㅠㅠ
ul을 div로 한번더 감싸주고
ul을 inline 요소로 변경해주고
div에 text-align center로 주셔도 됩니다
말씀하신 것처럼 해도 적용이 안됩니다 ㅠㅠ
<div style="text-align:center" class="div">
<ul class="pb_list" style="display:inline">
<li>비었음</li>
<li>비었음</li>
</ul>
</div>
근데 class="div" 에 예를들어 width:1200px 값을 정해주고 margin:0 auto 하고 li 를 %로 해보시면 가운데 정렬됩니당
답변을 작성하시기 전에 로그인 해주세요.
