Question

我正在阅读本教程，将垂直内部的两张图像垂直对齐，以便它们之间没有空间，请看一下 http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/

我写了这样的代码

<head>
<style type=”text/css”>
.imgclass
{
 background-color:#1122CC;
 text-align:center;
}
img
{
 display:block; 
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
 </div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>

但它没有工作，如我指定的链接中显示的第二张图所示。我在这做错了什么。我想要它们作为两个垂直的图片，没有任何空间。

请帮助

Answer 1

请使用正确的引号替换您的引号，“不是"。

代码缺少doctype并打开html-tag。

试试这个：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .imgclass
        {
            background-color:#1122CC;
            text-align:center;
        }
        img
        {
            display:block;
        }
    </style>
</head>
<body>
<div class="imgclass">
    <img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
    <img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>

您的结果应如下所示： http://pbrd.co/1qt52ku

在Chrome中测试过。其他浏览器可能需要通过line-height，margin和padding进行修复。

如何在div内垂直对齐图像，它们之间没有任何空间

1 个答案: