Html Opera和Google Chrome中无序列表中的垂直对齐图像_Html_Css_Image_Google Chrome_Opera

Html Opera和Google Chrome中无序列表中的垂直对齐图像

html css image google-chrome

Html Opera和Google Chrome中无序列表中的垂直对齐图像,html,css,image,google-chrome,opera,Html,Css,Image,Google Chrome,Opera,在下面代码的示例中 <html> <head> <style> .gallery li { border: 1px dotted black; width:100px; height:100px; float:left; list-style:none; margin:10px; text-align:center; line-height:100px; vertical-align:mi

在下面代码的示例中

<html>
<head>
<style>
.gallery li {
    border: 1px dotted black;
    width:100px;
    height:100px;
    float:left;
    list-style:none;
    margin:10px;
    text-align:center;
    line-height:100px;
    vertical-align:middle;
}
</style>
</head>
<body>
<ul class="gallery">
    <li>
        <img src="http://dummyimage.com/20x20/000/000000.png" />
    </li>
</ul>
</body>
</html>


李先生画廊{
边框：1px点黑色；
宽度：100px；
高度：100px；
浮动：左；
列表样式：无；
利润率：10px；
文本对齐：居中；
线高：100px；
垂直对齐：中间对齐；
}

我发现，只有Firefox可以使它垂直居中。而Opera和Chrome（谷歌Chrome）无法做到这一点。Opera和Chromium中是否有解决此问题的方法？

在

html

元素之前放置

DOCTYPE

，例如

<!DOCTYPE html>
<html>