2014-04-17 2 views
0

나는 항상 내 CSS 지식에서 약간의 틈새라고 생각하는 똑같은 문제에 부딪 히는 것 같다. 부트 스트랩을 사용하고 있지만 어떤 특별한 방법이라도 괜찮습니다. 간단히 말해서 나는 당신이 유사한 무언가를 만들려면 : 하나의 수직 정렬 된 div를 만들기위한 부스트랩이있는 간단한 CSS?

<table style="height:100%; width:100%"> 
<tr style="height:15%"><td></td></tr> 
<tr style="height:70%; background-color:#EAB300; text-align:center;"><td>Main</td></tr> 
<tr style="height:15%"><td></td></tr> 
</table> 

http://jsfiddle.net/c24hd/

그러나 div가 아닌 테이블

. 테이블을 사용하는 데 몇 초가 걸리지 만 div로 복제 할 때 div에 백분율 기반 높이를 적용 할 수없는 문제가 발생합니다.

어떤 팁이 있어도이 문제가 발생하지 않도록 할 수 있습니까?

TIA는

+0

테이블 레이아웃이있는 'div's가 설명하는 방식대로 작동해야합니다. 'div's로 무엇을 시도 했습니까? – SlightlyCuban

답변

1

나는 <div>을 100 %로 높이를 설정합니다. 그런 다음 내측 <div> 여백을 자동으로 설정하십시오.

편집 : 신경 쓰지 마세요. 가장 좋은 방법은 div를 표로, 내부 div를 표 셀로 표시 한 다음 수직으로 정렬하는 것입니다.

편집 : 한 번 더, 절대 위치 지정을 사용하여 화면 중앙에 배치 할 수도 있습니다.