-1

我一定是脑子有问题，因为我无法让这个简单的垂直对齐工作。代码如下。

CSS

div#topHolder {
    background: #000000;
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid #0000ff;
}

img#title {
    vertical-align: middle;
    border: 1px solid #ffff00;
}

HTML

<body>
    <form id="form1" runat="server">
    <div id="topHolder">
        <img id="title" src="images/file.gif" />
    </div>
    </form>
</body>

现在，您会看到，人们会期望图像位于 div 的中心，但实际上它位于顶部。当然，对齐的其他值也不起作用。为了大声哭泣，我错过了什么？！

4

2 回答 2

2

我建议你阅读这篇文章，它解释了为什么垂直对齐不能像你期望的那样工作。通常，它仅适用于表格（或具有表格样式的对象）和内联对象。这是标准定义的。

http://phrogz.net/css/vertical-align/index.html

编辑：

您可能会发现更有趣的是，在图像的任一侧添加文本。

<div id="topHolder">
     xx <img id="title" src="images/file.gif" /> xx
</div>

原因（我认为）是图像不是普通的内联元素，它们是“替换”内联元素，因此它们的行为略有不同。这意味着被替换的元素没有实际内容（它们在渲染时被“替换”，但就渲染引擎而言，实际的 img 本身是空的）。

添加真实内容（而不是替换内容）允许垂直对齐功能。如果您放置多个元素，那么它可以工作（甚至两个 img）

它在小提琴中起作用的原因是小提琴在内部做了很多事情，因此有时会对内容产生奇怪的影响。

有许多不同的解决方法可以解决这个问题，但所有这些都需要你可能会觉得令人反感的 hack。您最好计算边距以使其居中。

顺便说一句，“宽度：100%”是多余的，块级元素（如 div）默认为 100%。

于 2012-07-20T16:37:20.457 回答
-1

通常垂直对齐不适用于显示块（div具有默认显示块）所以给显示表单元格或使用这种类型的js

document.ready(function(){
var a = $('#div1').height();
var b = $('#img1').height();
var c = (a-b)/2;
$('#img1').css("margin-top",c);
});
于 2012-07-20T15:34:34.700 回答