1

左の div を右の div の真ん中に垂直に揃えたい。を使用してdisplay:table-cell;それを行うことはできますが、使用できませんfloat:left

これが私が試していることです：

HTML:

<div class="wrapper">
    <div class="left"><h1><a href="#"><img src ="img.png" /></a></h1></div>
    <div class="right">Right</div>
</div>

CSS:

.wrapper{
    overflow: hidden;
    border: 1px solid blue;    
    width: 400px;
}

.left{
    border: 1px solid red;   
    max-width: 200px; 
    max-height: 50px;
    float: left;   
    overflow: hidden;
    display:table-cell;
    vertical-align:middle;
}

img{
    display: block;
}

.right{
    width: 200px;
    height: 200px;
    float: right;
    border: 1px solid green;    
}

デモ: http://jsfiddle.net/fmpLt/

4

3 に答える 3

2

あなたが何を期待しているのかはっきりしていませんが、以下のコードを試しました。それがあなたを助けることができるかどうかを確認してください

display:table.wrapper に追加してtable-cellから.left

デモ

別のソリューションposition:absolute

.wrapper{
    overflow: hidden;
    border: 1px solid blue;    
    width: 400px;
   position:relative; background:yellow
}

.left{
    border: 1px solid red;   
    max-width: 200px; 
    max-height: 50px;
    overflow: hidden;   
    position:absolute;
    top:50%; margin-top:-25px
}

デモ 2

于 2013-03-04T09:14:27.410 に答える
1

左のdivの高さ（例：50px）がわかっている場合は、ラッパーコンテナと左のdivに対して相対的な位置を設定してから、左のdivに50％の上部の位置を設定し、margin-topをマイナスに設定します。高さの50％。

例えば。

.wrapper{
    ...
    position:relative;
}

.left{
    ...
    position:relative;
    height:50px;
    top:50%;
    margin-top:-25px;
}
于 2013-03-04T09:02:14.187 に答える
0

margin-top画像の高さの半分以下の高さの半分に設定を使用できます.right。この場合、それは になりますmargin-top: 68px。

于 2013-03-04T09:05:42.933 に答える