8

我正在尝试创建方形元素，该元素将使文本垂直和水平居中。此外，广场的整个区域应该是一个链接。这是我的 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/

4

7 回答 7

18

您可以稍微简化您的结构，并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

于 2013-10-09T13:57:29.903 回答
11

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

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

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

于 2015-09-05T21:48:09.153 回答
1

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

jsfiddle

于 2013-10-09T13:49:26.923 回答
1

试试我的技术；按照这个

.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没事！;)

于 2013-10-09T13:50:14.820 回答
1

尝试使用：line-height: 150px设置框内内容的高度。如果只有一行内容，这应该很有效。

于 2013-10-09T13:50:48.497 回答
1

使用valign="middle"在<td>

例子：

<td style="text-align: center; font-weight: bold;" valign="middle">
   text in the middle 
</td>
于 2013-10-09T13:51:35.547 回答
1

试试这个：

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;
}

和一个演示。

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

编辑，找到了更好的解决方案，将锚显示为表格单元格，也适用于多行：

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;
}

更新的小提琴

于 2013-10-09T14:05:24.293 回答