テキストを真ん中に縦に整列させ、divsを隣り合わせに配置します

Question

私はちょうど絵に関連してテキストを縦に整列させ、すべての内容をブロックの代わりにインラインにします。私はそれを達成するために固定位置とマージントップを使用してきましたが、それは非常に悪い方法です、私は良い方法があると思います。

jsFiddleがダウンしているので、ここに私のコードと類似のサイトがあります。

http://www.cssdesk.com/muEnL

Answer 1

セット子のdivは、細胞として表示します。次に、垂直方向のアライメント属性を使用します。ところで

http://www.cssdesk.com/zCGrb

.user-container div { display: table-cell; padding: 5px; vertical-align: middle; } 

クールなサイト。私はそれがあなたが行くようにCSSの変更を示すことが好きです。

Answer 2

以下を試してください。これは、同じライン上で一緒に画像と名前が（もちろん、調整することができます）、その下に表示されてログアウトして垂直方向に中央揃えています：

.image { 
    float:left; 
    line-height: 30px; 
} 

.name { 
    float: left; 
    line-height: 30px; 
} 

.logout { 
    clear: both; 
} 

Answer 3

これは、私の知る限りとして、あなたが欲しいものを行う必要があります伝えることができます。 div内のすべてをラップしない限り、画像とテキスト/リンクはインラインのままです。

<div class="user-container"> 
    <img src="http://www.gravatar.com/avatar/ec39c767ba245c2434ad2c31a3c481e5?s=128&d=identicon&r=PG" width="33" height="33"/> 

    <a href="#">John Doe</a> 

    <a href="#">Logout</a> 
</div> 

だから、あなただけの「垂直整列を：真ん中」を追加する必要があります。このCSSを使用することで、あなたの元のHTMLを使用して、

.user-container img { 
    vertical-align: middle 
} 

別のオプション：

自分のイメージスタイルに、のような

.user-container div { 
    display: inline; 
} 

.image img { 
    vertical-align: middle; 
}