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
变化'
'到'
'jsfiddle/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;css设置文字垂直居中
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
使⽤valign="middle"在
例⼦：
text in the middle
2013-10-09 13:51:35
SKeurentjes
1
试试这个：
HTML：
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
我同意这应该是可以接受的答案。您。 –

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。