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

xdajian

于 2011-02-25 17:11:40 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签：浏览器 IE Firefox HTML C

本文链接：https://blog.youkuaiyun.com/xdajian/article/details/83845780

CSS 专栏收录该内容

22 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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，谷歌浏览器测试没问题。