디스플레이가있는 CSS 크기 조정 div : 표 셀

Question

내 사이트에 헤더가 있으며 여기에는 컨테이너와 세 개의 div가 있습니다.

제목 컨테이너의 높이가 100px입니다. 첫 번째 div는 왼쪽으로 떠 있고 150px 너비입니다 두 번째 div는 오른쪽으로 수레되고 150px 너비입니다 세 번째 div는 다른 div를 포함하며 기본적으로 나머지 공간을 채우기 위해 크기가 조정됩니다.

제 3의 div를 세로로 가운데에 배치하고 싶습니다. display : table-cell 및 vertical-align을 추가하면 div의 중간 부분이 텍스트 크기로 축소됩니다. div 만 고정 크기로 조정할 수 있습니다.

<div id="#headingcontainer"> 
<div class="leftimg">Left</div> 
<div class="rightimg">Right</div> 
<div class="heading">Content to be centered horizontally and vertically</div> 
</div> 

#headingcontainer 
{ 
border: none; 
border-bottom: 2px solid #8c8cd4; 
width: 100%; 
height: 100px; 
text-align: center; 
background-color: #000; 
margin-bottom: 10px; 
margin-left: auto; 
margin-right: auto; 
} 

div.heading 
{ 
display: table-cell; 
vertical-align: middle; 
height: 100px; 
text-align: center; 
width: auto; 
} 


div.leftimg 
{ 
width: 150px; 
float: left; 
} 

div.rightimg 
{ 
width: 150px; 
float: right; 
} 

정확한 폭을 알지 못해 중간 div를 센터링 할 수있는 사람이 누구인지 알려 줄 수 있습니까?

표제 클래스의 표 셀 : 표 셀을 더 이상 세로로 배치하지 않고 가로로 배치하면됩니다.

Answer 1

이제는 저에게 맞는 답을 발견했습니다.

는 먼저 HTML (제목에 두 개의 추가 된 div)에 작은 변화 :

<div id="#headingcontainer"> 
    <div class="leftimg">Left</div> 
    <div class="rightimg">Right</div> 
    <div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div> 
</div> 

가 그런 다음 CSS로 변경

#headingcontainer 
{ 
    border: none; 
    border-bottom: 2px solid #8c8cd4; 
    background-color: #000; 
    margin-bottom: 10px; 
    width: 100%; 
    height: 100px; 
} 

div.heading 
{ 
    display: table; 
    border-collapse: collapse; 
    width: 100%; 
    height: 100px; 
    position: absolute; 
} 

div.heading div 
{ 
    display: table-row; 
} 

div.heading div div 
{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

이 허용 최종 사업부가 될 텍스트를 포함 둘 다 수직으로 그리고 또한 수평으로 중심에 두었다. 818725.

Answer 2

나는 이것이 당신이 찾고있는 것 같아요 ... CSS의 div.header가 패딩을 맨 위에 놓고 테이블 셀을 제거하고 너비 자동 대신 여백을 자동으로 설정했습니다. 이것이 당신이 원했던 것인지 확인하십시오. 간격에 따라 위에서 패딩을 조정해야하지만 이것이 나에게 가장 쉬운 방법 인 것 같습니다.

#headingcontainer 
{ 
border: none; 
border-bottom: 2px solid #8c8cd4; 
width: 100%; 
height: 100px; 
text-align: center; 
background-color: #000; 
margin-bottom: 10px; 
margin-left: auto; 
margin-right: auto; 
} 

div.heading 
{ 
height: 100px; 
text-align: center; 
margin: auto; 
padding-top:40px; 
} 


div.leftimg 
{ 
width: 150px; 
float: left; 
} 

div.rightimg 
{ 
width: 150px; 
float: right; 
} 

<div id="headingcontainer"> 
<div class="leftimg">Left</div> 
<div class="rightimg">Right</div> 
<div class="heading">Content to be centered horizontally and vertically</div> 
</div> 

Answer 3

불행하게도이 꽤 작업을 수행이 http://jsfiddle.net/KtgVN/20/