질문/조언질답게시판
Extra Form
CMS XpressEngine

.dr_menu {
    width:100%;
    height:auto;
    text-align:center;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    }
.dr_menu ul {
    text-align:center;
    font-size:14px;
    display:inline-block;
    *display:inline;
    zoom:1;
    }
.dr_menu li {
    width:132px;
    height:55px;
    line-height:55px;
    color:#ffffff;
    float:left;
    margin:0px 13px;
    background-color:#fbced3;
    border-radius:15px;
    }
.dr_menu li a {
    font-family:'Noto Sans Korean';
    font-style: normal;
    font-weight: 600;
    color:#ffffff;
    display:block;
    }
.dr_menu li:nth-child(4) {
    clear: both;
    }
.dr_menu li:nth-child(5) {
    float:left;
    }

 

 

 

 

 

 

 

1.png

 

 

 

 

제가 원하는 건 이런 배친데,

 

 

 

 

 

 

2.png

 

 

 

 

위 소스대로 하면 이렇게 되거든요.

어떻게 해야 2번째줄 메뉴들도 센터에 오게 할 수 있을까요??

  • ?
    text-align:center로 감싸고 안에 박스들은 display:inline-block 처리해 보십시오 float:left; 가 있으면 왼쪽으로 붙습니다.
  • ?
    <style>
    .div-wrap{text-align:center;margin:0 auto;width:500px;background:#f7f7f7}
    .div-box{width:150px;height:150px;display:inline-block;background:orange;margin:2px}
    </style>

    <div class="div-wrap">
    <div class="div-box"></div><div class="div-box"></div><div class="div-box"></div><div class="div-box"></div><div class="div-box"></div>
    </div>

    이걸로 테스트 해 보십시오.
    나머지 값들은 그냥 보기 쉬우라고 넣은거고
    두개만 기억하면 됩니다.
  • profile
    inline-block으로 하면 단점이 띄어쓰기도 적용을 받는다는 거죠.
    그래서 도어웹님이 div-box를 가진 div들 사이에 띄어쓰기가 안들어가게 하신거구요.
    사이즈가 고정되어 있고, float left로 하신다면 nth-child(4)에 margin-left를 주는 것도 방법이죠.
    그리고 display flex를 이용하는 것도 방법입니다.
  • profile ?
    flex가 꽤 쓸만하더군요.
    저야 작업자라 아직은 사용못하지만
    몇년만 지나면 이거덕분에 많이 편해질거 같더군요.

    참고로 윗분에게 링크
    https://www.w3schools.com/css/css3_flexbox.asp
  • ?
    display:webkit-box; display:webkit-flex; display:ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center

    적용할 class에 넣어보세요.
  • profile
    감사합니다 댓글들 보고 해결했어요!