在CSS中垂直对齐不能按预期方式工作

-1

我必须得到一个大脑故障，因为我无法使这个简单的垂直对齐工作。代码如下。在CSS中垂直对齐不能按预期方式工作

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的中心，而是它在它的顶部。当然，没有任何其他值的对齐工作。为了大声哭泣，我错过了什么？！

来源

2012-07-20 Konrad Viltersten

我不能重现您的问题：http://jsfiddle.net/tF96R/ – 2012-07-20 15:19:22

与极大的浏览器？ – MCSI 2012-07-20 15:35:06

FF，IE浏览器已经过测试。实际上，我把我的ASPX和CSS文件粘贴到jFiddle中，猜猜看！错误无法复制！此外，代码的上传版本按照假定的方式工作。我做出的唯一改变是摆脱名为VS2012的暴行并安装VS2010。代码是一样的。 – 2012-07-20 15:49:45

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

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

编辑：

有些事情，你可能会发现更有趣的是这一点，在图像的两侧添加文本。

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

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

添加真实内容（而不是替换的内容）允许vertical-align功能。如果你放置不止一个元素，那么它可以工作（即使是两个img的）

它在小提琴中工作的原因是小提琴做了很多内在的事情，因此有时会产生奇怪的效果内容。

对此有许多不同的解决方法，但所有这些都需要黑客，你可能会觉得不愉快。您可能会更好地计算边距以使其居中。

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

来源

2012-07-20 16:37:20

这是非常有见地的，我将它分级，所以你的声誉会稍高，但它仍然不会消除我为什么它在jsFiddle上工作的困惑 - > [像这样]（http：// jsfiddle.net/Chamster/AVhaZ/）。我没有列出任何东西，它的工作原理。 VS2010中的相同代码没有。 Grrr ... – 2012-07-20 16:44:59

@KonradViltersten - 查看更新 – 2012-07-20 17:06:46

好吧，我会{你的青睐亵渎}！我不知道，但你是对的，当我把“x”我会得到魔法发生......虽然，我没有让它与两个img的工作。也感谢宽度注释。很有帮助。 – 2012-07-20 20:30:00

-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-20 15:34:34

不是“显示：块”。你应该把垂直对齐放在对齐的元素上，而不是它的父对象，不是吗？ – 2012-07-20 15:51:53

把垂直对齐和显示表格单元格在父 – 2012-07-20 16:04:09

考虑它可以在jsFiddle上工作：[点击这里]（http://jsfiddle.net/Chamster/AVhaZ/）但不在我的电脑上。我不认为这与混淆的造型有关。此外，您的示例似乎将相对于屏幕的内容居中，并且它依赖于jQuery。这应该可以用CSS解决。 – 2012-07-20 16:11:29

在CSS中垂直对齐不能按预期方式工作

回答

相关问题