1

画像とテキストを垂直方向に中央揃えにしようとしています。これが私がwokringjsfiddlehttp://jsfiddle.net/4a9XX/に持っているコードです。テキストが画像よりも低いことがわかるので、どうすればそれらを水平にすることができますか？

CSS

#display {
position:fixed !important;
bottom:0;
z-index:999;
background-color:#D41924;
width:100%;
padding:5px;
color:#FFF;
font-weight:bold;
vertical-align:middle;
}

HTML

<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> SOME TEXT </div>
4

4 に答える 4

4

これを使用してください（vertical-align）：

​#display img, #display span {vertical-align: middle;}​'

そして、<span>タグ内にテキストを囲みます。

更新されたフィドル：http：//jsfiddle.net/4a9XX/10/

于 2012-07-06T05:47:42.013 に答える
0

http://jsfiddle.net/4a9XX/4/

spanテキストにタグを追加しました。

<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> <span>SOME TEXT</span> </div>

CSSを使用してシフトするposition: relative;

#display span {
   position: relative;
   top: -3px;    
}

#display spanspan要素IDの子であるタグを選択しdisplayます。他のすべてはかなり自明です。

于 2012-07-06T05:48:31.947 に答える
0

Css

   #display {
position:fixed !important;
bottom:0;
z-index:999;
background-color:#D41924;
width:100%;
padding:5px;
color:#FFF;
font-weight:bold;
}

img{
vertical-align:top;
}
p{
display:inline-block;
    vertical-align:top;
}

HTML

<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> <p>SOME TEXT </p></div>

img タグは要素なのでinline-block

ライブデモhttp://jsfiddle.net/4a9XX/8/

于 2012-07-06T05:50:19.547 に答える
0

vertical-align属性は、コンテナではなく内部要素に適用する必要があります。あなたはあなたのテキストをに入れて、そして両方にspan適用することができます：vertical-alignspanimg

​#display img, #display span {
    vertical-align:middle;
}​

これがフィドルです。

于 2012-07-06T05:50:51.333 に答える