0

このCSSコードを使用して、画像とそのタイトルをdivの中央に配置したい

.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}

.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}

このフィドルhttp://jsfiddle.net/7kx4r/を見ると、アイコンやテキストが中央に配置されていないことがわかります。これを修正するにはどうすればよいですか?

4

7 に答える 7

3

不要な CSS を削除し、次の CSS を使用します。

.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
    margin-right:2%;
    display:inline;
}

デモ

于 2012-08-24T10:23:50.440 に答える
1

.titleクラスを作る必要がありますdisplay: table-cell;

.title{
  margin-right:2%;
  display:table-cell;
  vertical-align:middle;
}

フィドル

注: テーブル セルは、古い IE ブラウザーでは機能しません。

于 2012-08-24T10:15:01.760 に答える
0

これが欲しいと願っています。

ピンクの線だけをtext-align: center中央に配置したい場合は、 を指定します。http://jsfiddle.net/7kx4r/17/

于 2012-08-24T10:43:12.303 に答える
0

text-alignあなたのdiv持つクラスで次のtitleように使用します

text-align: center;

このフィドルをチェックしてくださいhttp://jsfiddle.net/7kx4r/4/

于 2012-08-24T10:14:53.697 に答える
0

.titleクラスに定義display:table-cell; vertical-align:middle;するだけです。

その作品 IE8 から IE 10

dmeo を参照してください - http://jsfiddle.net/7kx4r/10/

于 2012-08-24T10:21:06.450 に答える
0

このようなもの？ http://jsfiddle.net/7kx4r/8/

追加するだけwidth:XXXpx; margin:0 auto;

于 2012-08-24T10:17:35.513 に答える
0

このCSSで試してみてください：

.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
    position:relative;
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}

.titleIkon{
    position:absolute;
    top:50%;
    margin-top: -8px;
}

ここで何が起こっているか: position:relative は、.box の子の新しいオフセット コンテキストを作成します。

position:absolute は、.titleIkon に、.box に対するオフセット パラメーター (左、右、上、下) を使用するよう指示します。

top:50% は、上端の位置を親の高さの 50% と見なす必要があることを .titleIkon に伝えます。

margin-top: -8px は、画像を高さの半分 (16px / 2 = 8px) だけ上に移動するようブラウザに指示します。

于 2012-08-24T10:18:39.300 に答える