div要素内のテキストを垂直に整列させる

Question

この質問は死にましたが、検索では何も私のために働いていないことは知っています。

私はテキストを垂直に配置する必要があるdiv要素がありますが、何も機能していません（位置：絶対;上：50％;余白 - 上：-x;表示：表セル;縦-align：middle;等）

ここで私は作業しています（インラインCSSには申し訳ありません）。とにかく、私は行の高さを使用しますが、テキストは1行または2行にすることができます。常に画像の垂直方向に合わせる必要があります。最大高さは30px（30x50）です。

<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"> 
<div style="float:left;width:55px;height:40px;"> 
<a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a> 
</div> 
<div style="float:right;width:155px;font-size:0.7em;height:40px;"> 
<a href="link">This is the text to vertically align</a> 
</div> 
</div> 

Answer 1

アイデアはhereからのものであり、すべてのブラウザで動作するはずです。

<div style="margin: 0 0 10px 0; padding: 10px; border: 2px solid #606060; background-color: #2b2b2b; 
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;"> 
    <div style="float: left; width: 55px; height: 40px;"> 
     <a href="link"> 
      <img style="max-width: 50px; border: 1px solid #ffb92c;" src="image.jpg" 
       alt="" /></a> 
    </div> 
    <div style="float: right; width: 155px; font-size: 0.7em; height: 40px; display: table; #position: relative; overflow: hidden;"> 
     <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;"> 
      <div style="#position: relative; #top: -50%;"> 
       <a href="link">This is the text to vertically align</a> 
      </div> 
     </div> 
    </div> 
    <div style="clear: both"></div> 
</div> 

Answer 2

あなたは、このように実行する必要があります。

http://jsfiddle.net/rathoreahsan/5u9HY/

利用fixed heightの代わりに、メインのdivでpadding。 & right divs

Answer 3

普通のフロートの問題は、clearfixで修正することができます。また、以下のコードスニペットで固定されたラッパーの高さで修正できます。

私はまた、浮動小数点のline-heightに座って少し広げました。

はこれを見てください：

<div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;height:40px"> <div style="float:left;width:55px;height:40px;"> <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a> </div> <div style="float:right;width:185px;font-size:0.7em;height:40px;line-height:40px"> <a href="link">This is the text to vertically align</a> </div> </div> 

http://jsfiddle.net/YqxPZ/3/

Answer 4

もう1つのことができます。それはdiv要素のテキストの一行のみだ場合は、ここで

div { 
    line-height:40px; 
} 

Answer 5

が解決

<div style="background: yellow"> 
<div style="width: 155px; font-size: 0.7em; height: 40px; display: table; overflow: hidden;"> 
    <div style="display: table-cell; vertical-align: middle;"> 
     <div style=""> 
      <a href="link">This is the text to vertically align</a> 
     </div> 
    </div> 
</div> 
<div style="clear: both"></div> 

http://jsfiddle.net/5y4Nb/

Answer 6

のクリーンバージョンですline-height

例を使用することができますあなたは非常にlの数行だけを表示する必要がありますか？テキストは、Fiddleです。必要に応じて高さを調整します。

.container-text { 
    height:40px; 
    width:180px; 
    overflow-y:hidden;  
    display:table-cell; 
    vertical-align:middle; 
    text-align: center; 
}