縦方向のインラインコンテンツ

Question

私はテキストとイメージのコンテンツ/ divが整列しています。しかし、私はそれらを互いに垂直に中心に置いてもらいたい。垂直コンテンツが行の高さを使用して整列させる

HTML

<div class="cell"><a href="...'</a></div> 
<div class="separate"></div> 
<div class="cell"><a href="...'</a></div> 
<div class="separate"></div> 
<div class="cell"><a href="...'</a></div> 

CSS

.cell, .separate { 
    display: inline-block; 
    margin: 0 5px; 
} 

.separate { 
    width: 2px; height: 25px; 
    background-color: red; 
} 

Answer 1

、vertical-align: middle;追加：あなたは垂直vertical-align

とインラインコンテンツを揃えることができ

.cell, .separate { 
    display: inline-block; 
    margin: 0 5px; 
    vertical-align: middle; 
} 

Answer 2

一つの方法。

HTML

<div id="parent"> 
    <div id="child">Text here</div> 
</div> 

CSSこれはあまりにもイメージに拡張することができます

#child { 
    line-height: 200px; 
} 

：このメソッドは、しかし、テキストの1行のために働く

HTML

​​

CSS

#parent { 
    line-height: 200px; 
} 

#parent img { 
    vertical-align: middle; 
} 

あなたがここに垂直センターのコンテンツに他の方法について読むことができます。このルールにhttp://vanseodesign.com/css/vertical-centering/

Answer 3

.cell, .separate { 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
    vertical-align: middle; 
 
} 
 

 
.separate { 
 
    width: 2px; height: 25px; 
 
    background-color: red; 
 
}

<div class="cell">asdf</div> 
 
<div class="separate"></div> 
 
<div class="cell">asdf</div> 
 
<div class="separate"></div> 
 
<div class="cell">asdf</div>