질문/조언질답게시판
Extra Form
PHP PHP 7.0
CMS Rhymix

td 안에 div를 넣었는데요

 

td 안에서 div를 가로 가운데 정렬 시키고 싶은데 어떻게 하면 될까요?

 

div정렬.PNG

  • profile
    <td><div style="margin:0 auto;">가맹상담</div></td>
    <td><div style="margin:0 auto;">점포탐색/가맹계약</div></td>
    <td><div style="margin:0 auto;">인테리어 설비/집기</div></td>
    <td><div style="margin:0 auto;">교육 오픈</div></td>

     

     

    혹은

     

    <style>
    .divname{margin:0 auto;}
    </style>
    
    <td><div class="divname">가맹상담</div></td>
    <td><div class="divname">점포탐색/가맹계약</div></td>
    <td><div class="divname">인테리어 설비/집기</div></td>
    <td><div class="divname">교육 오픈</div></td>

     

  • profile ?
    답변 감사드립니다.
    그런데 div에 margin:0 auto; 를 줘도 가운데 정렬이 안되네요ㅠㅠ

    왜이런지 모르겠네요
  • profile ?
    div에 display:table-cell 을 줘서 margin:0 auto 를 안먹었나 봅니다.

    삭제를 하니 가운데 정렬은 되네요.

    그런데 이제는 div 안에 텍스트가 가로/세로 가운데 정렬이 안되네요 ^^;;;
  • profile

    그런데 equeer 레이아웃 사용중이신것 같은데... 레이아웃은 반응형 레이아웃이나 컨텐츠는 반응형이 아니네요

    지금 만들고 계신 페이지는 PC는 대응이 가능하나... 모바일 환경에서는 전부 깨지고 있습니다. ㅠㅠ

    저 또한 프랜차이즈 법인을 운영중인데.. 가맹관련 랜딩페이지의 접속자 USER AGENT를 살펴보면 모바일의 방문비중이 꽤나 높습니다.

     

    이퀴어 레이아웃에서 제공하는 예제들을 참조, 수정하셔서 적용하시면 PC버전/모바일버전 따로 만드실 필요없이

    반응형으로 PC+모바일 모두 지원하는 멋진 사이트를 만드실 수 있을겁니다!

     

    참조 : https://calvinsnax.com/colors

  • ?
    그냥 td{text-align:center} 처리하시면 될겁니다.
    둥근게 원이니까 어치피 inline 속성이 있을거고...
  • ? ?
    td에 text-align:center 를 줘도 가운데 정렬이 안되네요ㅠ
    둥근게 div를 border-radius를 줘서 둥글게 한겁니다.
  • profile
    div에 테이블셀은 빠진 상태라고 가정하고
    td에는 align=center
    div에 display를 inline-block을 주면 가운데 정렬 될 것 같은데요.
  • ?

      <style>
        td{width:300px;height:300px;border:1px solid #ddd;}
      </style>

      <table>
      <tr>
        <td style="text-align:center"><div style="border-radius:50%;width:200px;height:200px;display:inline-block;background:red"></div></td>
        <td><div style="border-radius:50%;width:200px;height:200px;background:red"></div></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      </table>

     

    이걸로 한번 확인해 보세요.

    inline-block의 유무에 따라 라운드 위치가 달라질겁니다.

  • ? ?
    Tip 감사합니다. ^^

    <style>
    td{width:300px;height:300px;border:1px solid #ddd;}
    </style>

    <table>
    <tr>
    <td style="text-align:center"><div style="border-radius:50%;width:200px;height:200px;display:inline-block;background:red">AAA</div></td>
    <td><div style="border-radius:50%;width:200px;height:200px;background:red"></div></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>


    그런데 위 첫번째 td내에 div내에 AAA 텍스트를 div 내 가로/세로 가운데 정렬을 하려면
    inline-block를 주면 안되지 않나요?
  • ? ?
    저도 이거 테스트 하면서 지금까지 잘못알고 있던 부분을 알게되었는데요.
    넓이값이 특정되면 그 자체러 inline 속성을 가지는줄 알았더니 그게 아니더군요.

    그래서 처음엔 둥근 라운드가 inline 속성을 가질거라 생각했었고...

    일단 td에 text-align:center를 넣으면 이 안에 있는것들은 중앙배열을 하라고 하는건데
    그 안에 속성이 block인게 있으면 이게 자체적으로 전체가 다 공간을 잡아먹다 보니 넓이값을 넣어도 중앙배열이 안되는거 같습니다.

    그러니까 중앙배열을 하고 싶으면 무조건 감싸는곳에는 text-align:center를 그 안에 중앙배열하고 싶은건 display:inline-block 처리하시면 될겁니다. 요즘은 ie6,7을 거의 사용 안하지만 이것들은 *display:inline 써서 한번더 수정해 줘야 하고요.
  • ?

    실수로 하단 td도 align:center를 넣어둔다는걸 깜박했네요.

    이렇게 보시면 더 이해가 쉬우실겁니다.

     

      <style>
        td{width:300px;height:300px;border:1px solid #ddd;}
      </style>

      <table>
      <tr>
        <td style="text-align:center"><div style="border-radius:50%;width:200px;height:200px;display:inline-block;background:red">테스트</div></td>
        <td style="text-align:center"><div style="border-radius:50%;width:200px;height:200px;background:red">테스트</div></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      </table>

  • ? ?
    답변 감사드립니다.

    그런데 td안에 div를 가운데 정렬하고.. 그 div 안에 텍스트를 다시 가로/세로 가운데 정렬하려니 안되네요.

    두가지 조건이 모두 만족하게 할수는 없나보네요ㅠ
  • ?

    https://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-align   여기에서 vertical-align: middle; 이걸로 바꾸신 다음에 한번 테스트 해 보세요.