td 안에 div를 넣었는데요
td 안에서 div를 가로 가운데 정렬 시키고 싶은데 어떻게 하면 될까요?
| PHP | PHP 7.0 |
|---|---|
| CMS | Rhymix |
-
-
?
Lv3 답변 감사드립니다.
그런데 div에 margin:0 auto; 를 줘도 가운데 정렬이 안되네요ㅠㅠ
왜이런지 모르겠네요 -
?
Lv3 div에 display:table-cell 을 줘서 margin:0 auto 를 안먹었나 봅니다.
삭제를 하니 가운데 정렬은 되네요.
그런데 이제는 div 안에 텍스트가 가로/세로 가운데 정렬이 안되네요 ^^;;; -
그런데 equeer 레이아웃 사용중이신것 같은데... 레이아웃은 반응형 레이아웃이나 컨텐츠는 반응형이 아니네요
지금 만들고 계신 페이지는 PC는 대응이 가능하나... 모바일 환경에서는 전부 깨지고 있습니다. ㅠㅠ
저 또한 프랜차이즈 법인을 운영중인데.. 가맹관련 랜딩페이지의 접속자 USER AGENT를 살펴보면 모바일의 방문비중이 꽤나 높습니다.
이퀴어 레이아웃에서 제공하는 예제들을 참조, 수정하셔서 적용하시면 PC버전/모바일버전 따로 만드실 필요없이
반응형으로 PC+모바일 모두 지원하는 멋진 사이트를 만드실 수 있을겁니다!
참조 : https://calvinsnax.com/colors
-
?
Lv9 그냥 td{text-align:center} 처리하시면 될겁니다.
둥근게 원이니까 어치피 inline 속성이 있을거고... -
Lv15 div에 테이블셀은 빠진 상태라고 가정하고
td에는 align=center
div에 display를 inline-block을 주면 가운데 정렬 될 것 같은데요. -
?
Lv9 <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의 유무에 따라 라운드 위치가 달라질겁니다.
-
?
Lv9 ?Lv3 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를 주면 안되지 않나요? -
?
Lv3 ?Lv9 저도 이거 테스트 하면서 지금까지 잘못알고 있던 부분을 알게되었는데요.
넓이값이 특정되면 그 자체러 inline 속성을 가지는줄 알았더니 그게 아니더군요.
그래서 처음엔 둥근 라운드가 inline 속성을 가질거라 생각했었고...
일단 td에 text-align:center를 넣으면 이 안에 있는것들은 중앙배열을 하라고 하는건데
그 안에 속성이 block인게 있으면 이게 자체적으로 전체가 다 공간을 잡아먹다 보니 넓이값을 넣어도 중앙배열이 안되는거 같습니다.
그러니까 중앙배열을 하고 싶으면 무조건 감싸는곳에는 text-align:center를 그 안에 중앙배열하고 싶은건 display:inline-block 처리하시면 될겁니다. 요즘은 ie6,7을 거의 사용 안하지만 이것들은 *display:inline 써서 한번더 수정해 줘야 하고요. -
?
Lv9 실수로 하단 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> -
?
Lv9 ?Lv3 답변 감사드립니다.
그런데 td안에 div를 가운데 정렬하고.. 그 div 안에 텍스트를 다시 가로/세로 가운데 정렬하려니 안되네요.
두가지 조건이 모두 만족하게 할수는 없나보네요ㅠ -
?
Lv9 https://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-align 여기에서 vertical-align: middle; 이걸로 바꾸신 다음에 한번 테스트 해 보세요.
혹은
<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>