css - html中的水平和垂直居中文本

标签 css html

<分区>

我有一个带有背景图像的 div,需要水平和垂直居中。在该图像之上,我还想显示 1 行文本,同样水平和垂直居中。

我设法让图像居中,但文本没有垂直居中。我认为 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 社区诅咒到 hell 。)有什么重要的理由不使用这个 btw 吗?不过,我仍然对使用 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>

最佳答案

传统上 block 元素的水平居中是这样完成的:

div.inner { margin: 0 auto; }

注意:以上内容在 quirks 模式下无法与 IE 一起使用,因此总是在您的文档顶部放置一个DOCTYPE 以强制它进入标准兼容模式。

垂直居中要繁琐得多。参见 Vertical Centering in CSS

关于css - html中的水平和垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2498552/

相关文章:

javascript - 如何水平移动div

html - 删除 IE8 中选择元素内的多余填充

html - Bootstrap 3 : how to 7 images in 12 columns

html - 元素标签内容的 CSS 选择器

javascript - 第一次查看输出时无法隐藏文本

html - div表每行不同的单元格

html - 媒体查询斗争

jquery - 类中包含的 CSS 规则不适用于 div

javascript - 创建 HTML5 钢琴卷帘编辑器

html - 没有通过提交按钮获取图像