Question

这是一种非常常见的情况：设计师告诉我，某些文本应该是垂直居中的，但是我不能使用display：table-cell; hack，因为包含元素需要具有不同的显示property。由于存在问题，我也不想使用任何position:absolute。

小提琴：https://jsfiddle.net/z824m656/1/

HTML

<div class="contents-vertically-centerd">
  <img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png" width="150"/><span>Here's some text that I want vertically centered with respect to the image</span>
</div>

CSS

div.contents-vertically-centerd { padding: 10px; border: 1px dashed #000000; }

Answer 1

您需要垂直对齐图像，而不是文本。

你试过了吗？

div img {
vertical-align: middle;
}

在您描述的那种情况下，如果您：

，它也会对您有所帮助

明确声明图片的height
将display文字的<span>声明为inline-block
明确声明height

<span>

明确声明line-height

<span>

Answer 2

这是使用vertical-align: middle;的更新小提琴 https://jsfiddle.net/z824m656/2/

div.contents-vertically-centerd * {
  vertical-align:middle;
}

Answer 3

您可以使用vertical-align: middle，但请注意，这只会对齐inline（或inline-block内容）。所以它应该像：

div.contents-vertically-centerd img, div.contents-vertically-centerd span {
    display: inline-block;
    vertical-align: middle;
}

Answer 4

对于您的特殊用例，有一个简单的解决方案：在图像上使用vertical-align: middle。它将文本居中于图像。 Here’s the updated Fiddle

Answer 5

另一种选择是<div style="height:100px">  </div> <div class="container"> <a href="#" class="button">Sign Up</a> <a href="#" class="button">Login</a> </div>方法。

transform: translateY(-50%)

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

div {
  height: 200px;
  
  /* Used to center horizontally */
  text-align: center;
}

p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

更详细的记录here。

是否有一种很好的方法来垂直居中文本而不使用display：table-cell在父级？

5 个答案: