三个div实现跨浏览器的text-align:center的效果

最新推荐文章于 2022-09-09 16:58:02 发布

原创最新推荐文章于 2022-09-09 16:58:02 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #IE #Firefox #HTML #C

CSS 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种在不同浏览器中实现文本居中的方法，并通过实际代码示例展示了如何使用HTML和CSS技巧来确保文本在IE、Firefox及谷歌浏览器中的显示效果一致。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <BODY style="text-align:center;">
 <!--body的样式中的：text-align:center，在ff中只能作用到DIV标签上。但是能够作用到div内部的元素中，是DIV内部元素居中：
 如：测试文本A，A坐在的DIV没有居中，但是A在DIV中实现居中。-->
  <div style="border:1px solid red;width:80%;"> 测试文本:A </div>
 <p>
 测试文本:B
 </p>
 <!---三个div实现跨浏览器的text-align:center的效果-->
<div style="border:1px solid red;width:30%;float:left;height:20px;"> <!--左侧空白--> </div>
<div style="border:1px solid red;width:39%;float:left;height:20px;"> 测试文本:C </div>
<div style="border:1px solid red;width:30%;float:left;height:20px;"><!--右侧空白--></div>
 </BODY>
</HTML>

IE，firefox，谷歌浏览器测试没问题。