垂直中心一个div

为什么不这项工作（即DIV内容不居中 - 垂直）?:垂直中心一个div

<div style="display: table;"> 
    <div style="vertical-align: middle; display:table-cell; height: 100px; font-size: 11px;"> 
     <a target="_self" runat="server" href="~/daily.aspx"> 
     <img src="images.png" /></a> 
      content in div<br /> 
    </div> 
</div>

谷歌搜索无处不在了解我怎么能垂直对齐一个div和它的内容已经失败。

任何人都可以为div中的内容提供最好的CSS样式。

更新需要说明的是，我需要垂直对齐图像的文本不仅仅是div。文字是图像的底部。可能不得不使用花车。

来源

2011-10-27 Rob

我无法重现您的错误：http://jsfiddle.net/QtzRA/ –

这就是我在Google上搜索时所阅读的内容。它应该有效，但事实并非如此。它是css版本吗？这与外部div有关吗？我需要进一步调查。 – Rob

@Rob您正在使用哪种浏览器？也适用于我。 – Tetaxa

如果你只需要在文本中间对齐文本，这将做到：

<div> 
    <div> 
     <a target="_self" runat="server" href="~/daily.aspx"> 
     <img src="images.png" style="vertical-align: middle;"/></a> 
     content in div<br /> 
    </div> 
</div>

这里是一个例子http://jsfiddle.net/Tetaxa/tVQc6/

来源

2011-10-27 09:34:09 Tetaxa

谢谢！对不起，其他人对我最初的问题没有正确解释。不能相信这是多么简单。再次感谢。 – Rob

行..当发生这种情况时会发生什么http://jsfiddle.net/tVQc6/2/ – Rob

好吧，'img'被定位在内联中，所以行高将被调整为该行。如果你想让文本在图像的边上突破几行，你需要将img设置为绝对或浮动。 – Tetaxa

如果您将元素显示为表格，为什么不使用表格？

据我所知，除非你知道它的高度，否则不可能将内容居中。如果你知道你的高度可以使用这样的事情：

.container { 
    position: relative; 
} 

.vertical { 
    position: absolute: 
    top: 50%; 
    height: 200px; 
    margin-top: -100px; // This is half the height 
}

来源

2011-10-27 08:54:37 will

关于使用表格的好处:)但是我讨厌使用表格来表达这么小的东西。我确实有我的例子中定义的高度，但我会尝试你的例子，看看它是否有效。感谢你的回答。 – Rob

@Rob不要将'

'元素用于非表格数据**，尤其不能用于样式**。 –

我同意也不会:) – Rob

你为什么不尝试使用<table>？还是你想用<div>本身做？

来源

2011-10-27 09:07:50

因为它不是表格数据，所以他不应该使用表格 – robertc

我同意所有人谁建议不使用此示例的表:) – Rob

我知道这是一个老问题，

但没有人尝试显示：table/table-cell/table-row代替？这应该没问题。（ofcourse不工作在较旧的IE等）

从W3Schoools类型：http://www.w3schools.com/cssref/pr_class_display.asp

这些类型可以设定为任意的html元素，它应该呈现为表的一部分（或表本身）。这意味着你应该能够使用div来呈现数据，就好像它在表中一样。虽然我还没有测试过这个，并且上次我使用这个版本是在几年前。

能元素被显示为一个表表字幕的元素被显示为一个表标题表单元中的元件被显示为元件被显示为一个表列
一个表格单元格
表列 table-column-group元素显示为表列组（如）
table-footer-group该元素显示为表格页脚行组 table-header-group该元素显示为表格标题行组
表行该元素显示为表行 table-row-group元素显示为表格行组

来源

2013-05-24 07:44:32

您可以稍微扩展一下吗？试试如何？ –

我做过了，但我认为你不会使用它;） –

垂直中心一个div

回答

相关问题