1

このように、メッセージを div の中央に配置する必要があります 。親 div の幅は 100% で、メッセージを水平方向に中央に配置することは問題ありません。また、ご覧のとおり、アイコンも垂直方向に中央揃えされていますが、テキストを垂直方向に中央揃えにすることはできません。これまでのところ、その div に適用した唯一の CSS は

.content {
    height: 100% ;
    display: inline-block ;
}

.container でメッセージ div が下に移動する理由を教えてください。そして、これは正しいクロスブラウザアプローチですか?

4

6 に答える 6

2

このようにcssを変更します

.content {
height: 100% ;
display: inline-block ;
vertical-align:middle;
line-height:5px;
}

.container {
display: inline-block ;
height: 100% ;
}

フィドルをチェック

于 2013-09-20T12:31:03.303 に答える
1

次のようなものを使用できます

.parent {
    background-color: lightgrey ;
    width: 100% ;
    height: 50px ;
    text-align: center ;  
    display: inline-block;
}
.content {
  height: 100%;
  display: inline-block;
  margin-top: -15px; //so that text lies at the center level of icon
  vertical-align: middle;
  }
于 2013-09-20T12:30:10.853 に答える
1

http://jsfiddle.net/sDWxN/2/

.container高さは問題であり、高さを 100% にして親に合わせることができます.container。に追加vertical-align:middle;した後.content。

.content {
    height: 100% ;
    display: inline-block ;
    vertical-align:middle;
}

.container {
    display: inline-block ;
    height: 100% ;
}
于 2013-09-20T12:30:17.873 に答える
1

別のアプローチ。

メッセージとアイコンを子スパンのあるスパンに「関連付ける」ことを好みます。このアプローチの 2 つの鍵:

  1. コンテナーdiv を親の div 内で垂直方向に揃えます。両方のクラスでpositionを使用し、containerでmarginを使用すると、それを実現できます。

  2. スパンを親スパン内のメッセージと垂直に揃えます (アイコン付きのスパンで、 icon-messageクラスを使用します)。CSS コードのコメントを参照してください。

すべてのブラウザで動作します。

HTML

<div class="parent">
    <div class="container">
        <span class="icon-message">
            <span>message</span>
        </span>
    </div>
</div>

CSS

.parent {
    background-color: lightgrey ;
    width: 100% ;
    height: 70px ;
    text-align: center ; 
    position: relative;
}

.container {
    position: absolute;
    display: inline-block;
    height: 40px ;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #000;
}

.icon-message {
    background: url( "http://upload.wikimedia.org/wikipedia/commons/8/88/Red_triangle_alert_icon.png" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image's size */
    height: 40px; /* image's height */
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}

.icon-message span {
    height: 40px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}
于 2013-09-20T13:19:52.557 に答える