画像を名前と整列させる方法は？

Question

私は以下のコードを参照してください。名前が画像の中央にくるように名前を画像に揃えようとしています。私はそれを正しく行うことができませんでした。私は位置を追加しようとしました：絶対;しかしそれはまだトリックをしません。

<div id="contain"> 
    <div id="baseline"> 

    <div id="title2"> 

    <img src="http://www.marketingjava.com/wp-content/uploads/2012/01/ 
    new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div> 
    </div> 

    CSS: 

    #contain { 
    width: 770px; 
    min-height: 170px;  
    margin: 20px auto 60px auto; 
    color: #222222; 
    font-size: 15px;  
    position: relative; 
    } 
    #baseline { 
    color: #999; 
    } 

    #title2 { 
    color: #000; 
    font-size: 30px; 
    margin-left: 10px; 
    padding-bottom: 5px; 
    padding-top: 5px; 
    width: 750px; 
    } 

Answer 1

浮動小数点は両方とも左にして、中央にマージンを置いてタイトルを調整します。

http://jsfiddle.net/FBj3f/

Answer 2

最も簡単な方法は、画像要素の代わりに背景画像を使用することです。次に、そのブロック内のテキストを右揃えにして、右上に配置することができます。

Answer 3

あなたは画像の高さを知っていれば、あなたがテーブルを使用して反対ではないなら、あなたは自動的に（ない操作を行うことができ、垂直centerdタイトルhttp://jsfiddle.net/BtPwh/1/

その結果、タイトルの行の高さを設定することができます画像の高さが必要です。）これは次のようになります。http://jsfiddle.net/tLggp/1/