ul태그 센터정렬 어떻게 하나요? 채택완료
사진에서 보시는 것처럼 비었음 이라는 li와 그를 감싸는 ul태그가 있습니다.
파란영역은 ul영역인데 이게 PC/Mobile 때문에 함부로 ul에 width: 870px;을 줄 수도 없고
(모바일에서 깨져보이기 때문) 방치하자니 파란영역에 오른쪽 부분이 비어있어서 불편하고..ㅠㅠ
어떻게 하면 좋을까요..? 소스는 아래 남깁니다.
.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;}
주택가는 지금 공사중!
《 주택 신청방법 》
작성중
《 주택 놀러가기 》
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
비었음
답변 4개
flex를 활용해 보세요
예시처럼 li 태그를 145px로 하고 3줄로 정렬하고 싶다면
Div display: flex, justify-content:center
Ul display:flex, flex-wrap:wrap, max-width: 435px
Li
Li
Li
Li
모바일로 쓰다 보니 자세히 적지는 못하겠네요.
플렉스를 활용해서 손쉽게 정렬 가능합니다
답변에 대한 댓글 1개
MAHIR댓글을 작성하려면 로그인이 필요합니다.
비었음
비었음
근데 class="div" 에 예를들어 width:1200px 값을 정해주고 margin:0 auto 하고 li 를 %로 해보시면 가운데 정렬됩니당
댓글을 작성하려면 로그인이 필요합니다.
ul을 div로 한번더 감싸주고
ul을 inline 요소로 변경해주고
div에 text-align center로 주셔도 됩니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
sinbi가운데 정렬 원리 참고해 보세요.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인