테이블에서 글자 상하 가운데 정렬하기
본문
글자를 표의 상하 중앙정렬 하고 싶습니다.
아래는 위 표의 소스입니다.
<table border="0" cellpadding="0" cellspacing="0" style="border:2px solid #ffffff; border-left:0; border-bottom:0;" class="__se_tbl">
<tbody>
<tr>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="" margin="auto">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>텍스시공</b></span>
</p>
</td>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>T-BAR</b></span>
</p>
</td>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>마이톤</b></span>
</p>
</td>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>석고2P</b></span>
</p>
</td>
</tr>
<tr>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>단파.SMC</b></span>
</p>
</td>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>스터드 칸막이</b></span>
</p>
</td>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>학원 칸막이</b></span>
</p>
</td>
<td style="border-width: 0px 0px 2px 2px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: rgb(255, 255, 255); border-left-color: rgb(255, 255, 255); border-image: initial; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; width: 360px; height: 40px; background-color: rgb(255, 170, 0);" class="">
<p style="text-align: center; " align="center">
<span style="font-size: 12pt; color: rgb(255, 255, 255);"><b>화장실 칸막이</b></span>
</p>
</td>
</tr>
</tbody>
</table>
<br>
답변 4
개발자 도구에서 확인해봤는데
p {
margin: 0 0 10px;
}
/eyoom/theme/company_e3/plugins/bootstrap/css/bootstrap.min.css에 영향을 받네요.
아 감사합니다.
그럼 margin: 0 0 0px;로 강제로 잡아주면 되겠네요
최고!
전 위 소스 적용 시 가로세로 모두 가운데 정렬되서 보이네요.
IE11, 크롬(버전 59.0.3071.36(공식 빌드) beta (64비트))
헐;; 저도 크롬, 익스11, 모바일 등등 다 테스트해보았는데 위로 붙어서 나오네요;
관심가져주시고 댓글주셔서 감사합니다.
bootstrap.min.css의 영향을 받아 글자아래에 10px을 강제삽입한다는 댓글을 확인하고,
p함수에 margin: 0 0 0px; 을 삽입하여 해결하였습니다.
다시한번 댓글 감사말씀드립니다^^
<td style="padding-top:5px; 를 임시로 넣어보세요~
그리고 스타일은 별도로 만들어서 이용하시길...
또는
참고 해보세요~~
관심가져주시고 댓글주셔서 감사합니다.
bootstrap.min.css의 영향을 받아 글자아래에 10px을 강제삽입한다는 댓글을 확인하고,
p함수에 margin: 0 0 0px; 을 삽입하여 해결하였습니다.
다시한번 댓글 감사말씀드립니다^^
<td align="center">내용<td> 이렇게 하시면 됩니다....
style을 클래스나 , id로 정의하셔서 사용하세요.....;;
그리고 크롬 , 익스에서도 잘나오는데요?
http://sitedesign.kr/bbs/board.php?bo_table=port&wr_id=2
수정중이라 변할 수 있습니다.
align="center"은 적용안되네요
아랫분 답변처럼
sitedesign.kr/eyoom/theme/company_e3/plugins/bootstrap/css/bootstrap.min.css
부트스트랩 p태그에 영향을 받네요 ^^
관심가져주시고 댓글주셔서 감사합니다.
bootstrap.min.css의 영향을 받아 글자아래에 10px을 강제삽입한다는 댓글을 확인하고,
p함수에 margin: 0 0 0px; 을 삽입하여 해결하였습니다.
다시한번 댓글 감사말씀드립니다^^
답변을 작성하시기 전에 로그인 해주세요.
