css垂直對齊李和邊框的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 s 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/