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

时间:2013-01-28 02:53:16

标签: 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:middle;
}
</style>
</head>
<body>
<ul class="gallery">
    <li>
        <img src="http://dummyimage.com/20x20/000/000000.png" />
    </li>
</ul>
</body>
</html>

我发现,只有Firefox才能使其垂直居中。虽然Opera和Chromium(谷歌Chrome)不能这样做。无论如何在Opera和Chromium中解决这个问题?

1 个答案:

答案 0 :(得分:1)

DOCTYPE元素之前添加html,例如

<!DOCTYPE html>
<html>