5

float:left を使用して画像を行に配置する場合、異なる寸法の画像を正方形の div にセンタリングするという簡単なタスクを実行するための実用的なソリューションが必要です。

 .outer-element{ //wrap tile div
     display:table-cell;
     width:300px;height:300px;
     text-align:center ;
     vertical-align:middle ;
     float:left;
     margin-bottom:15px;
 }
 .inner-element{ //div with image inside
     display:inline-block;
 }

しかし、私は float: left を使用して画像を行に配置する必要があり、その場合、画像は垂直方向に中央揃えされません (画像は div の上端に揃えられます)。他の CSS コードをいくつか試しましたが、float:left は常に画像を作成します垂直方向の中央揃えではありません。

4

3 に答える 3

15

テーブルセルがコンテンツを表示する方法と競合するためfloat:left;、あなたから削除してください。.outer-elementコンテナを左にフロートさせる必要がある場合は、左にフロートする.outer-element別のコンテナ内に を配置します。

HTML

<div class="fl">
    <div class="outer-element">
        <div class="inner-element">
            <img src="http://thecybershadow.net/misc/stackoverflow.png" />
        </div>
    </div>
</div>

CSS

.fl {float:left;}
.outer-element{
    display:table-cell;
    width:300px;
    height:300px;
    vertical-align:middle;
    background:#666;
    text-align:center;
    margin-bottom:15px;
}
.inner-element{
    display:inline-block;
}

例: http://jsfiddle.net/xQEBH/17/

お役に立てれば！

于 2012-05-30T17:56:52.383 に答える
0

あなたのCSS...

.outer-element{ //wrap tile div
     display:table-cell;
     width:300px;height:300px;
     text-align:center ;
     vertical-align:middle ;
     float:left;
     margin-bottom:15px;
 }
.inner-element{ //div with image inside
     display:inline-block;
 }

要素を左にフロートさせたい次を追加するだけです...

.outer-element:before{content: "."; height: 0; overflow: hidden; visibility: hidden; float: left;}

お役に立てれば....

于 2013-03-10T04:56:33.617 に答える