DIV 내에 수직 정렬, div 내에 블록 요소가 있음

Question

이것은 항상 나를 미치게 만들었고 올바른 대답을 찾지 못했습니다.

나는 다음과 달성하고자하는 : http://juicybyte.com/stack-overflow.jpg

의 의미는, 내가 잘이 콘텐츠의 양에 따라 자체를 수직 맞추는 왼쪽 DIV, 텍스트에 이미지를 갖고 싶어. 텍스트 div의 높이를 고정시킬 수 있습니다.

그러나 모든 것이 중단되지 않습니다.

<div id="widgetWhite"> 
<div id="widgetWhiteIcon"> 
    <a href="#" title="White"><img src="/images/iconWhiteIconTn.png" alt="White Icon" /></a> 
</div> 
<div id="widgetWhiteContent"> 
    <p>I would love it if this worked.</p> 
    <a href="#">Download PDF</a> 
</div> 
</div> 

CSS의 :

#widgetWhiteIcon { 
width: 82px; 
margin: 0 10px 0 20px; 
display: inline-block; 
vertical-align: middle; 
} 

#widgetWhiteContent { 
width: 108px; 
font: normal normal 11px/14px Arial, sans-serif; 
height: 110px; 
display: inline-block; 
vertical-align: middle; 
} 

#widgetWhiteContent a { 
color: #f37032; 
} 

정말 IE6.0에 대해 상관 없어,하지만 IE7.0 불행히도 필요합니다.

도움 주셔서 감사합니다.

Answer 1

수직 정렬이 작동하려면 래퍼 div (div # widgetWhiteContent)의 고정 높이를 먼저 설정해야합니다. div # widgetWhiteContent의 모든 항목을 div # widgetWhiteIcon과 수직으로 정렬하려면 두 div의 높이가 같아야합니다.

그래서 좋은 해결책은 외부 div의 높이를 설정 한 다음 두 div의 높이를 모두 100 %로 설정하는 것입니다.

귀하의 CSS 내가 링크 된 사이트를 기반으로 당신을 위해 함께 해결책을 넣고, 여기에이

<style> 
    #widgetWhite { 
     height: 110px; 
    } 

    #widgetWhiteIcon { 
     width: 82px; 
     margin: 0 10px 0 20px; 
     display: inline-block; 
     height: 100%; 
    } 

    #widgetWhiteContent { 
     clear: left; 
     width: 108px; 
     font: normal normal 11px/14px Arial, sans-serif; 
     height: 100%; 
     display: inline-block; 
     vertical-align: middle; 
    } 

    #widgetWhiteContent a { 
     color: #f37032; 
    } 
</style> 

Answer 2

처럼 간다. 나는 당신의 기존 CSS를 그것에 맵핑하는 것을 괴롭히지 않았지만 당신이 아이디어를 얻을 것이라고 생각한다.

 

<div class="ie7vert1"> 
    <a href="#" title="White"><img src="http://placehold.it/120x150" alt="White Icon" /></a>    
    <div class="ie7vert2"> 
     <div class="ie7vert3">   
      <p>I would love it if this worked.</p> 
      <a href="#">Download PDF</a> 
      <br style="clear: both;" /> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/M3h6v/5/

.ie7vert1 { 
    display: table; 
    #position: relative; 
    overflow: hidden; 
    border: 1px dashed gray; 
    float: left; 
    width: 100%; 
} 

.ie7vert2 { 
    #position: absolute; 
    #top: 50%; 
    display: table-cell; 
    vertical-align: middle; 
} 

.ie7vert3 { 
    #position: relative; 
    #top: -50%; 
    border: 1px dashed red; 
} 

Answer 3

vertical-align 속성은 사용이 전제 조건이 있습니다

• 당신이 형제해야 수직 정렬하려고하는 요소.
• 세로로 정렬하려는 요소는 블록 수준 요소가 아니어야합니다.
말했다되고 그건

이 실제로 해결하기 매우 쉽습니다 : #widgetWhiteIcon에 대한 닫는 DIV 및 #widgetWhiteContent의 오프닝 사업부가 감동입니다

<div id="widgetWhite"> 
    <div id="widgetWhiteIcon"> 
     <a href="#" title="White"><img src="http://placehold.it/100x100" alt="White Icon" /></a> 
    </div><div id="widgetWhiteContent"> 
     <p>I would love it if this worked.</p> 
     <a href="#">Download PDF</a> 
    </div> 
</div> 

하는 것으로 : </div><div id="widgetWhiteContent">. 일반적으로 마크 업에서 inline 요소 사이의 모든 공간이 프레젠테이션에 표시되므로이 두 요소 사이의 간격을 제어 할 수 있습니다.

편집은 : 당신은 동등하게 공백에 대한 걱정없이 #widgetWhite에 font-size: 0을 설정할 수 있습니다.font-size 아이들 요소에서 상속, 그래서 당신은 명시 적으로, 그 이후 설정과 같이해야합니다 : #widgetWhite { font-size: 0; } #widgetWhite * { font-size: 12px; }

CSS :

p { margin: 0; } 
#widgetWhite > div { 
    vertical-align: middle; 
    display: inline-block; } 
#widgetWhiteContent { margin: 0 0 0 4px; } 
#widgetWhiteContent a { 
    margin: 1em 0 0; 
    display: block; } 

미리보기 : http://jsfiddle.net/Wexcode/DcWB8/