html设置a标签在divk中居中,如何在div元素中居中文本？

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

text in the middle

这是我的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，但不是在IE浏览器。在IE中，文本位于广场顶部，而不是中间。你能帮助我吗？

+2

变化'

'到'

'http://jsfiddle.net/yWLYV/ –

+0

已经尝试过。这并没有改变文字的位置。 –

A

回答

18

您可以简化您的结构位和a元素上使用display:table-cell。

HTML

text in the middle

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;

}

工作到IE8

2013-10-09 13:57:29

+0

那适用于所有浏览器和代码都很优雅。 –

1

变化

到和a.userLink财产display到inline-block或inline。

2013-10-09 13:49:26

Morpheus

+0

就是这样！ 'display' CSS –

+0

但是现在链接在IE中不起作用:( –

1

试试我的技术;按照这个

.outer{ float:left; width:100px; height:100px; background-color:#ccc; }

.innet{ float:left; width:100%; line-height:100px; text-align:center; }

This is my text

和morpheus没事！ ;)

2013-10-09 13:50:14

avalkab

1

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

2013-10-09 13:50:48

acairns

0

使用valign="middle"在

例子：

text in the middle

2013-10-09 13:51:35

SKeurentjes

1

试试这个：

HTML：

Text here

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-09 14:05:24

LinkinTED

9

一个伟大的方式来获得完全居中的文字是用Flexbox的布局。可以在水平和垂直居中的容器元素的含量用很少的代码：

.container-with-centered-content {

display: flex;

align-items: center;

justify-content: center;

}

2015-09-05 21:48:09

bromy

+1

它的工作原理！这应该是可以接受的答案！ –

+0

我同意这应该是可以接受的答案。您。 –