테이블에서 글자 상하 가운데 정렬하기

테이블에서 글자 상하 가운데 정렬하기

QA

테이블에서 글자 상하 가운데 정렬하기

본문

글자를 표의 상하 중앙정렬 하고 싶습니다.

 

c2d7c6f80b82b03e276e3aacabc6d930_1494308568_3876.png
 

아래는 위 표의 소스입니다.


<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에 영향을 받네요.

전 위 소스 적용 시 가로세로 모두 가운데 정렬되서 보이네요. 

IE11, 크롬(버전 59.0.3071.36(공식 빌드) beta (64비트))

관심가져주시고 댓글주셔서 감사합니다.
bootstrap.min.css의 영향을 받아 글자아래에 10px을 강제삽입한다는 댓글을 확인하고,
p함수에 margin: 0 0 0px; 을 삽입하여 해결하였습니다.
다시한번 댓글 감사말씀드립니다^^

<td style="padding-top:5px; 를 임시로 넣어보세요~ 


그리고 스타일은 별도로 만들어서 이용하시길...


또는


http://okkks.tistory.com/942


참고 해보세요~~

관심가져주시고 댓글주셔서 감사합니다.
bootstrap.min.css의 영향을 받아 글자아래에 10px을 강제삽입한다는 댓글을 확인하고,
p함수에 margin: 0 0 0px; 을 삽입하여 해결하였습니다.
다시한번 댓글 감사말씀드립니다^^

<td align="center">내용<td> 이렇게 하시면 됩니다....

style을 클래스나 , id로 정의하셔서 사용하세요.....;;

그리고 크롬 , 익스에서도 잘나오는데요?

관심가져주시고 댓글주셔서 감사합니다.
bootstrap.min.css의 영향을 받아 글자아래에 10px을 강제삽입한다는 댓글을 확인하고,
p함수에 margin: 0 0 0px; 을 삽입하여 해결하였습니다.
다시한번 댓글 감사말씀드립니다^^

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

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