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

I'm trying to create square element, that will have text centered both vertically and horizontally. Additionally, the whole area of the square should be a link. This is my HTML:

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

And this is my CSS:

这是我的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;
}

It works in Chrome and Firefox, but not in Internet Explorer. In IE the text is at the top of the square, not in the middle. Can you help me with this?

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

I just created playground here: http://jsfiddle.net/Tschareck/yfnnm/

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

7 个解决方案

#1

You could simplify your structure a bit, and use display:table-cell on the a element.

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

html

HTML

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

css

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

Demo at http://jsfiddle.net/yWLYV/1/

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

works down to IE8

适用于IE8

#2

A great way to get perfectly centered text is to use a flexbox layout. You can horizontally and vertically center the content of a container element with very little code:

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

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

Demo: http://jsfiddle.net/913fch6v/

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

#3

Change <tr style="vertical-align: central"> to <tr style="vertical-align: middle"> and a.userLink property display to inline-block or inline.

将更改为，并将a.userLink属性显示为内联块或内联。

jsfiddle

的jsfiddle

#4

try my technique; follow this

试试我的技术;按照这个

.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>

and morpheus all right! ;)

和morpheus没事！ ;）

#5

Try using: line-height: 150px to set the height of the content within the box. This should work well if there is only a single line of content.

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

#6

Try this one:

试试这个：

HTML:

HTML：

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

CSS:

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

And a demo.

还有一个演示。

Please note that it only allows one line of text... is that a problem?

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

EDIT, found a better solution, display the anchor as a table cell, works multiple line too:

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

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

更新小提琴

#7

Use valign="middle" in the <td>

在中使用valign =“middle”

Example:

例：

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

#1