web-dev-qa-db-ja.com

CSSの垂直方向の整列がフロートで機能しない

floatプロパティでvertical-alignおよびdivを使用するにはどうすればよいですか？ floatを使用しない場合、vertical-alignは正常に機能します。しかし、フロートを使用すると、機能しません。最後のdivにfloat:rightを使用することが重要です。

すべてのdivからフロートを削除すると、うまくいくでしょう：

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS：

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

htmlcssvertical-alignment
73
user1355300

行の高さを設定する必要があります。

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

84
Anders B

編集済み：

vertical-align CSSプロパティは、インライン、インラインブロック、またはテーブルセル要素の垂直方向の配置を指定します。

vertical-align について

16
Ahsan Khurshid

実際、浮動要素では垂直方向の配置は機能しません。これは、フロートが要素をドキュメントの通常のフローから持ち上げるためです。変換、表示に基づいたものなど、他の垂直方向の配置手法を使用することもできます：テーブル、絶対配置、行の高さ、js（最後の手段かもしれません）、さらにはプレーンな古いhtmlテーブル（コンテンツが実際には表形式）。この問題については激しい議論があることがわかります。

ただし、これは3つのdivを垂直方向に整列させる方法です。

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

なぜ固定幅、ディスプレイ：インラインブロックとフローティングの両方が必要なのかわかりません。

8
Gabriel