CSSの垂直方向の整列はfloatでは機能しません


86

どのようにして使用することができるvertical-alignだけでなく、floatdivのプロパティ?をvertical-align使用しない場合は正常に動作しfloatます。しかし、フロートを使用すると、機能しません。float:right最後のdivにを使用することが重要です。

私は以下を試しています、すべてのdivからfloatを削除すると、正常に機能します:

<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

回答:


90

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

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


32
line-heightすべての要素に同じ値を設定した場合、vertical-alignは役に立ちません。(jsfiddle.net/VBR5J/448
ÉdersonT.シュラフタ

<button>要素に対しては機能しません。代わりの<span>です<button>
グリーン

15
この答えは間違っています。vertical-alignはdiv、個々の要素ではなく、CONTAINER()に属します。フロート要素を垂直方向に整列できる正しい解決策は、とコンテナの両方vertical-alignline-height配置することです <div style="border: 1px solid red; vertical-align:middle; line-height: 38px;">vertical-align:middle; line-height: 38px;スパンスタイルから削除します。
toolmakerSteve 2016年

1
私が提案することは、回答のフィドルのフロートスパンでは機能するが、一部の要素では機能しないことを発見しました(フロートラジオ入力では失敗しました)。
toolmakerSteve 2016年

1
@ToolmakerSteveは間違っており、この答えは間違っています。Vertical-alignは、インライン要素、インラインブロック、またはテーブルセルにのみ適用されます(後者は奇妙です)。'float'を追加すると、en要素がブロック要素になります。それでも、line-heightを使用する(そしてvertical-alignを無視する)ことが解決策になる可能性があります。
commonpike 2018年

15

編集:

垂直整列CSSプロパティは、インライン、インラインブロック又はテーブルセル素子の垂直方向の配置を指定します。

垂直整列については、この記事をお読みください


1
inline-block要素にも適用されます。
rolf

1
更新しました。私はそれを逃しました。言及してくれてありがとう。
Ahsan Khurshid 2017年

4
これは答えではありません
SerzhanAkhmetov20年

このリンクは質問に答えることができますが、ここに答えの本質的な部分を含めて、参照用のリンクを提供することをお勧めします。リンクされたページが変更されると、リンクのみの回答が無効になる可能性があります。-レビューから
UtsavPatel20年

8

実際、垂直方向の配置は浮動要素では機能しません。これは、フロートが要素をドキュメントの通常のフローから持ち上げるためです。変換、表示に基づくものなど、他の垂直方向の配置手法を使用することもできます:テーブル、絶対位置、行の高さ、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; 
}

固定幅、表示:インラインブロックとフローティングの両方が必要な理由がわかりません。


ソリューションを実現する方法を示すために、回答にコードを追加していただけますか?
abarisone 2015

また、「正解」は簡単に破られます...地球上で19人がどのように賛成したのか不思議に思います。
ガブリエル

3
質問には「最後の要素にfloat:rightが必要」と書かれているので、最後の要素をコンテナの右側に配置する必要があるかもしれません。あなたの答えでその目標を達成する方法は?
fly.x 2016

良い答え、そしてそれ以外にとても明確です!Flexboxオプションがないだけです。
luillyfe 2017年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.