CSS垂直对齐[重复]

Posted 2023-03-05

【中文标题】CSS垂直对齐[重复]

【英文标题】：CSS vertical align [duplicate]

【发布时间】：2011-06-14 17:25:50

【问题描述】：

我在浮动 div 中有一个 img，但我不知道如何垂直居中。

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align: middle 当然不行。

http://jsfiddle.net/wKQYj/

【问题讨论】：

本文提到的两种方式已经作为单独的答案给出，但如果你知道 vertical-align 的实际用途，你会是一个更好的 CSSer：phrogz.net/css/vertical-align

@scragz - 这是一个很好的链接。不过，我不会使用display:table-cell。当然，我也不会使用我建议的答案<table>。哈。

pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg

这能回答你的问题吗？ How do I vertically align text in a div?

【参考方案1】：

要在父元素中垂直对齐文本，并记住 img 是一个内联元素，因此其行为与文本相似，您只需将 line-height 设置为父元素的height：

div 
    height: 300px;
    line-height: 300px;

JS Fiddle demo.

【参考方案2】：

vertical-align CSS 样式指定文本在其文本行内的对齐方式。例如，这允许您将文本指定为上标或下标。

所以它实际上并不是要垂直对齐框内的元素。

但有一个明确的例外——表格单元格（即<td> 和<th> 元素）使用vertical-align 样式来做到这一点：在单元格内对齐单元格的内容。

这个例外有点奇怪——它真的不应该存在。 CSS 设计者把它放在那里是为了让 CSS 重现表格元素的 valign 属性，在基于表格的布局的黑暗时代，设计者通常使用该属性。

对于其他元素，将盒子的内容垂直对齐在盒子的中间可能是一门艺术。有几种技术：

对于单行文本，只需使line-height 与整个框的高度相同。你可能甚至不需要vertical-align。

使用display:table-cell; 使元素模拟表格单元格，然后使用vertical-align。这可行，但可能会产生意想不到的后果（您可能不想模拟表格单元格的其他属性）。

如果您知道要垂直对齐的元素的高度，则可以将其定位为 50% 减去其高度的一半，如下所示：

position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */

还有其他一些，但这些应该可以帮助您入门。

希望对您有所帮助。

【参考方案3】：

对于不使用表格的更现代 (IE8+) 解决方案，我最喜欢 this one。

<style>
/* Can be any width and height */
.block 
  height:500px;
  text-align: center;


/* The ghost, nudged to maintain perfect centering */
.block:before 
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */


/* The element to be centered, can be any width or height */ 
.centered 
  display: inline-block;
  vertical-align: middle;
  width: 300px;

</style>

<div class="block"><div class="centered">Centered Content</div></div>

【讨论】：

确实是最好的解决方案，因为它不需要知道内容的高度并且不使用表格单元 css。感谢分享！

有没有办法做到这一点，而 .centered 是百分比宽度（实际上可能是 100%）。

【参考方案4】：

使用 translate 属性，它很简单，即使在 IE 中也可以使用：

img 
  position: relative;
  top: 50%;
  transform: translateY(-50%);

【参考方案5】：

vertical-align 属性仅在 td 元素上真正有用。尝试类似：

<table>
 <tr>
  <td style='height:300px; vertical-align:center'>
   <img src='something'>
  </td>
 </tr>
</table>

或者因为你知道img的高度和宽度：

<div style='height:300px;'>
 <img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>

【讨论】：

ZOMG，以上这些对我来说似乎都不好，我的意思是css中存在严重的漏洞，它们正在产生阴影等，我们必须使用表格或div中的div来垂直居中.. 。 天啊。我必须使用 div。而且我不能使用第二个代码，因为用户会更改 div 的高度。所以我迷路了。

@anonymous：你能使用 javascript 或任何 JS 库（MooTools、Scriptaculous、jQuery、Glow...）吗？

【参考方案6】：

漂亮cool and modern approach（指定高度）：

.Absolute-Center 
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;

【参考方案7】：

我正在使用 display:box 属性：

#container 
    display: box;
    box-orient: vertical;
    box-pack: center;  


#text 
    vertical-align: middle;

在此处查看 js-fiddle：verical align js-fiddle

【参考方案8】：

Javascript 可能是让图像在每个案例的垂直中心居中的最佳选择。如果你可以使用像 jQuery 这样的库，那只需要几行代码。

$(function()
    var containerHeight = $('#container').outerHeight();
    var imgHeight = $('#logo img').outerHeight();

    var difference = (containerHeight - imgHeight)/2;
    $('#logo img').css('position' : 'relative', 'top' : difference + 'px');

);

【讨论】：

所以他需要包含完整的 jQuery 库，加上这个脚本？只是为了集中一些东西似乎有点矫枉过正。

如果他必须多次居中并且他不知道 A) 父 div 的高度是多少，以及 B) 图像的高度是多少，这将每次工作，在任何情况下工作

【参考方案9】：

我正在使用 flex 来使元素居中。它可以有效地使页面更具响应性。

div 
    display: flex;
    align-items: center;

请查看here 了解如何垂直居中。