我有一个带背景图片的div,需要在水平和垂直方向上居中显示。除此之外,我还想显示一行文本,也要在水平和垂直方向上居中显示。
我已经成功将图片居中,但是文本没有垂直居中。我原本以为vertical-align:middle会解决问题。
以下是我的代码:
我已经成功将图片居中,但是文本没有垂直居中。我原本以为vertical-align:middle会解决问题。
以下是我的代码:
<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
<div style="color:#ffffff; text-align: center; vertical-align:middle;" >
Some text here.
</div>
</div>
有什么想法吗?
解决办法:我使用了一个表格,实际上这个方法可以让它工作。(HTML社区可能会诅咒我去地狱。)不过,有没有明显的理由不使用表格呢?顺便说一下,我还是对使用div的解决方案感兴趣。
<table width="100%" height="100%">
<tr>
<td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
</tr>
</table>
table,tr,td {display:block;}
添加到测试CSS样式表中:如果内容仍然可用/可读(尽管布局已经破坏),则您的表格序列化良好;如果它变得完全无法使用,则辅助技术将难以解析您的表格。对于单元格表格,线性化永远不会被打破,所以您应该没问题。 - Edurne Pascual