Question

我正在尝试创建方形元素，它将使文本在垂直和水平方向上居中。此外，广场的整个区域应该是一个链接。这是我的HTML：

<div class="w1h1 medium">
    <a class="userLink" target="_blank" href="Fancybox.aspx">
        <table style="width: 100%; height: 100%">
            <tr style="vertical-align: central">
                <td style="text-align: center; font-weight: bold;">
                    text in the middle 
                </td>
            </tr>
        </table>
    </a>
</div>

这是我的CSS：

div.w1h1 {
    width: 150px;
    height: 150px;
}

.medium {
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
}

a.userLink
{
    width: 150px;
    height: 150px;
    display: table;
    color: #FFFFFF;
    text-decoration: none;
}

适用于Chrome和Firefox，但不适用于Internet Explorer。在IE中，文本位于正方形的顶部，而不是在中间。你能帮我解决这个问题吗？

我刚在这里创建了游乐场：http://jsfiddle.net/Tschareck/yfnnm/

Answer 1

您可以稍微简化一下结构，并在display:table-cell元素上使用a。

<强> HTML

<div class="w1h1 medium">
    <a class="userLink" target="_blank" href="Fancybox.aspx">
       text in the middle 
    </a>
</div>

<强> CSS

div.w1h1 {
    width: 150px;
    height: 150px;
    font-family:sans-serif;
    background-color: #06849b;
}
a.userLink {
    width: 150px;
    height: 150px;
    display: table-cell;
    vertical-align:middle;
    text-align:center;
    color: #FFFFFF;
    text-decoration: none;
}

演示 http://jsfiddle.net/yWLYV/1/

适用于IE8

Answer 2

获得完美居中文本的一个好方法是使用flexbox布局。您可以使用非常少的代码水平和垂直居中容器元素的内容：

.container-with-centered-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

演示：http://jsfiddle.net/913fch6v/

Answer 3

将<tr style="vertical-align: central">更改为<tr style="vertical-align: middle">，将a.userLink属性display更改为inline-block或inline。

jsfiddle

Answer 4

尝试我的技术;按照这个

.outer{ float:left; width:100px; height:100px; background-color:#ccc; }
.innet{ float:left; width:100%; line-height:100px; text-align:center; }

<div class="outer">
        <span class="inner">This is my text</span>
</div>

和morpheus没事！ ;）

Answer 5

尝试使用：line-height: 150px设置框内内容的高度。如果只有一行内容，这应该可以正常工作。

Answer 6

试试这个：

HTML：

<a href="#">Text here</a>

CSS：

a {
    display: block;
    width: 150px;
    height: 150px;
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
    vertical-align: middle;
    line-height: 150px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

和demo。

请注意，它只允许一行文字......这是一个问题吗？

编辑，发现了一个更好的解决方案，将锚显示为表格单元格，也可以使用多行：

a {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 150px;
    height: 150px;
    background-color: #06849b;
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    font-weight: bold;
}

Updated fiddle

Answer 7

在valign="middle"

中使用<td>

示例：

<td style="text-align: center; font-weight: bold;" valign="middle">
   text in the middle 
</td>

如何在div元素中居中文本？

7 个答案: