Question

这是我第一次使用Stack Overflow，虽然我在这里找到了很多解决方案。但我无法找到这个问题的答案。我通过在<a href>周围放置一个div可点击，然后在我放置文本的<div>标签内。这是JSFiddle的链接：http://jsfiddle.net/fw6HT/3/

我确信我忽略了一些非常明显的东西，但我无法让文本在div中垂直对齐。
我希望你们能够帮助我！我也对如何以更好的方式做到这一点的其他建议持开放态度。

Answer 1

Here is the fiddle

div {
    background:red;
    top:50px;
    height:200px;
    width:200px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

或如果您有一行文字

div {
    background:red;
    top:50px;
    height:200px;
    width:200px;
    text-align:center;
    line-height:200px;
}

但是第一个解决方案是最好的和常见的解决方案

Answer 2

你基本上都想要

将文本换行到DIV而不是SPAN
或给出span“display：block”，以便您可以像div一样管理它

然后按照此处的规则：Vertical alignment of elements in a div

Answer 3

为了完整性＆＃39;此外，还有一种超级简单的方法可以垂直和水平对齐另一个元素中的任何元素：flexible box layout module。如果您不知道内容的确切大小并不重要，如果容器具有动态高度/宽度并不重要。

你需要的只是这三个：

display: flex;
justify-content: center;
align-items: center;

jsFiddle

*当然，flexbox是一个相当新的功能。这是not available on older IEs（好吧，不管怎么说都不是没有填充），它也可能需要一些浏览器前缀。

如果你没有定位旧浏览器和/或使用像Autoprefixer这样的东西，那么flexbox非常棒。

通过<a></a>垂直对齐div环绕中的文本

3 个答案: