ul태그 센터정렬 어떻게 하나요?

ul태그 센터정렬 어떻게 하나요?

QA

ul태그 센터정렬 어떻게 하나요?

본문

991939767_1604237758.5584.png

 

 

사진에서 보시는 것처럼 비었음 이라는 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

모바일로 쓰다 보니 자세히 적지는 못하겠네요.

플렉스를 활용해서 손쉽게 정렬 가능합니다

 

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 를 %로 해보시면 가운데 정렬됩니당

답변을 작성하시기 전에 로그인 해주세요.
전체 17,115
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT