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

vertical-alignを機能させるには、まずラッパー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プロパティを使用するための2つの前提条件があります。

• あなたは兄弟である必要があり、垂直に整列しようとしている要素が。
• 縦方向に整列させる要素は、ブロックレベルの要素であってはいけません。言われて、これは実際に解決するのは非常に容易であること

：

<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> 

注#widgetWhiteIcon締切のdivと#widgetWhiteContent用の開口divが触れていること：</div><div id="widgetWhiteContent">を。これにより、通常、マークアップ内のinline要素の間のスペースがプレゼンテーションに表示されるため、これら2つの要素の間隔を制御できます。

編集：あなたは、等価的空白を気にせずに#widgetWhiteにfont-size: 0を設定することができます。#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/