CSSの垂直方向の整列liとdivの境界

Question

こんにちは私は垂直にいくつかのリの中心にしようとしています しかし、私はボーダートップとボーダーボトムを置くように、それはもはや仕事をしません。 は、私が（より少ない組み合わせ、...）どこでも100の値を変更しようとしましたが、私はそれがすべて

HTML

感謝を動作させるカント：

<div> 
    <ul> 
     <li><img src="http://dummyimage.com/50x50/000/fff.png&text=tester" /> Some text</li> 
     <li> Some text</li> 
     <li>333</li> 
    </ul> 
</div> 

CSS ：

ul li { 
    display: inline; 
    height: 100px; 
    line-height: 100px; 
    border: 1px solid #ff0000; 
    } 

    ul li img { 
     vertical-align: middle; 
    } 

    div { 
    height: 100px; 
    background-color: yellow; 
    border-top: 1px solid #444444; 
    border-bottom: 1px solid #444444; 
    } 

https://jsfiddle.net/pgyakeu3/

Answer 1

高さはinline要素には適用されません。 liをinline-blockにする必要があります。また、あなたはマージン、パディングなど

Updated fiddle

Answer 2

ないあなたが達成しようとしているのかわからためのブラウザのデフォルトをオーバーライドする必要がありますか？これは本当ですか？あなたの要素の正確高さの値を知っているのでhttps://jsfiddle.net/pgyakeu3/2/

、これはこの方法をacomplishedすることができます答えを

ul { 
    height: 100px; 
    margin-top: 25px; 
} 
ul li { 
    display: inline; 
    border: 1px solid #ff0000; 
} 
ul li img { 
    vertical-align: middle; 
} 
div { 
    height:100px; 
    background-color:yellow; 
    border-top:1px solid #444444; 
    border-bottom:1px solid #444444; 
} 

Answer 3

ul li { 
display: block; 
height: 100px; 
line-height: 100px; 
border: 1px solid #ff0000; 
text-align :center; 
} 

https://jsfiddle.net/kartik_bhalala/89amryhw/