5

div内のいくつかの画像を垂直方向に整列/中央揃えしようとしています。100%正しくありません。画像のピクセル数が多すぎて、垂直方向の中央に配置できません。何故ですか?

.Container
{   
    width:280px;
    position:fixed;
    border:1px solid blue;
    left:0px;
    text-align: center;
    line-height:84px;
}

.Container input[type=image]
{
   vertical-align:middle;
}

アップデート:

http://jsfiddle.net/2j531q32/

更新2:画像はjsフィドルでは無効です画像と上部の境界線の間にギャップがあります。

4

4 に答える 4

2

受け入れられたソリューションは、IE11では機能しませんでした。

垂直センタリングの方法のすばらしいページを見つけました。

これは、ChromeとIE11で機能します。線の高さは、中央に配置する要素の中で最も高い要素である必要があります。

#Parent{
    line-height: 200px; // > the highest element to be centered.
}

.parent img {
    vertical-align: middle;
}

Jsfiddleのデモンストレーション

于 2014-12-04T16:46:04.523 に答える
1

行の高さcssは必要ありません。display:tabledisplay:table-cellスタイルを使用して、divを垂直方向に揃えることができます。の高さは.ButtonBarDiv、両方が垂直方向に中央に配置されていることを示すために誇張されています。

1行に1つの画像:http: //jsfiddle.net/eY7Ms/16/

同じ行の画像:http: //jsfiddle.net/eY7Ms/14/

于 2013-01-14T22:54:22.300 に答える
0

いくつかの調査の後、stackoverflowに関する別の質問を見つけました: div内の画像には画像の下に余分なスペースがあります

ブラウザは線の上/下に余分なスペースをレンダリングしているように見えるので、線の高さを調整することをお勧めします。例を次に示します。

http://jsfiddle.net/eY7Ms/13/

したがって、垂直方向の余分なスペースを調整する場合は、次のようにします。

.boxWithVerticalCenteredContent {
    height: 4em;
    line-height: 3.6em;
}

私は知っています、これは完全に中央に配置されておらず、高さが固定されていますが、絶対的に中央に配置したい場合はposition: absolutetop, bottom, left, right

于 2013-01-14T22:51:17.180 に答える
0

最新のブラウザでのみ機能しますが、次のようになります。

.elementToAlign{
position: relative;
top: 50%;
transform : translateY(-50%);
}
于 2016-04-18T16:15:41.157 に答える