css - CSS 垂直中央の画像とテキスト

Question

例として、このソースコードを作成しました。たとえば、h2タグのパディングトップ90pxを手動で入力しました。しかし、パディングテキストを削除すると、垂直方向の中央に配置されません。ブルーボックスの div の高さがわかっている場合は問題ありませんが、200px の場合もあれば 900px の場合もあります。

.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}

.bluebox h2
{
font-family: Arial;    
font-size: 10pt;  
text-align: center;
padding-top: 90px;
}

<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>

デモ: http://jsfiddle.net/5UJWa/

Answer 1

垂直方向の画像センターとテキストのデモを1つ作成し、firefox、chrome、safari、Internet Explorer 9および8でもテストしました。

これは非常に短くて簡単な css と html です。以下のコードを確認してください。screenshort で出力を見つけることができます。

HTML

    <div class="frame">
      <img src="capabilities_icon1.png" alt="" />
    </div>

CSS

    .frame {
        height: 160px;      
        width: 160px;
        border: 1px solid red;
        white-space: nowrap;
        text-align: center; margin: 1em 0;
    }

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

    img {
        background: #3A6F9A;
        vertical-align: middle;
    }

Answer 2

テキストと画像を垂直方向に揃えて中央に配置する私のチュートリアルを参照してください。テキストの行間に大きなギャップが生じるため、行の高さに依存しないでください。http://www.andy-howard.com/verticalAndHorizo​​ntalAlignment/index.html