html - div の垂直中央としてのスパンと img タグ

Question

私は div タグを持っています。彼には span と img タグがあります。span と img が div の垂直方向の中央になるようにしたいのですが、これは真実ですが、span タグmargin-topが機能せず、span タグを中央に配置できません。解決策とは？

<div>
    <span>
        some text
    </span>
    <img  src="..." />
</div>

CSS:

div {
    width: 200px; 
    height: 40px; 
    background: #ccc   
}

span {
    margin-top: -10px; 
}

img {
   width:20px;
    height: 20px;   
    margin-top: 10px;
}

これはデモhttp://jsfiddle.net/Q9utY/4/です

Answer 1

パディングでこれを試してください

div {
   width: 200px; 
   padding: 20px;
   background: #ccc   
}


img {
   width:20px;
   height: 20px;   
   vertical-align: middle;
}

http://jsbin.com/isijop/1/

ここでは、高さで line-height を使用できます

div {
   width: 200px; 
   height: 40px;
   line-height: 40px;
   background: #ccc   
}

img {
   width:20px;
   height: 20px;   
   vertical-align: middle;
}

http://jsbin.com/apawog/1/

Answer 2

Span はデフォルトでインライン要素であるため、margin は影響しません。

これを修正するには、追加display:blockまたはdisplay:inline-blockスパンします。

しかし、個人的には、これが最善の方法だとは思いません。これは、それを行う6つの方法を含む記事です。

CSSで縦方向にセンタリングする6つの方法

Answer 3

img クラスに vertical-align:middle を追加。

vertical-align:middle;

ここで試してください

http://jsfiddle.net/Q9utY/4/