`
accpxudajian
  • 浏览: 458916 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • CSS
浏览器IEFirefoxHTMLC 
阅读更多 
<!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，谷歌浏览器测试没问题。

 

 

分享到：
| EasyT.java(20110223版本)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html居中问题

    #### 一、引言 在网页设计中，元素的居中对齐是一项常见的需求。...通过结合使用`margin`和`text-align`属性，可以在大多数情况下有效地解决块级元素的居中问题，从而提高网页的跨浏览器兼容性。

    三种居中.docx

    在这个例子中，`align="center"`使得整个表格水平居中，而`valign="middle"`则尝试让表格内的单元格(`&lt;td&gt;`)内容垂直居中，但实际效果可能因浏览器差异而异。 2. Div布局页面居中 在现代浏览器中，更推荐使用CSS来...

    css布局居中和CSS内容居中区别和对应DIV CSS代码.docx

    - **内容居中示例**：创建三个相同大小的红色边框的DIV，分别应用`text-align: center`、`text-align: left`和`text-align: right`，可以观察到内容居中、靠左和靠右的效果。 五、相关案例与教程 - **布局居中...

    图片垂直居中的代码的几种方法

    在网页设计中，图片的垂直居中是一个常见的需求，尤其在构建美观且响应式的网站时。本文将深入探讨四种不同的CSS方法，用于实现图片在div容器内的垂直居中，每种方法都有其适用场景和独特之处。 ### 第一种方法：...

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局，并确保在各种浏览器中都能实现中间内容的居中显示。 首先，我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域（content）、内边距（padding...

    CSS2.1如何让块元素垂直水平居中.rar

    本文将深入探讨如何使用CSS2.1来实现这一目标，无论是对于已知宽高还是未知宽高的块级元素（div）。首先，我们需要理解CSS布局的基本概念，包括盒模型、定位和display属性。 1. 盒模型： CSS中的每个元素都可以...

    盒子上下左右居中设置

    5. **Text-align 和 Vertical-align**：如果内容是文本，可以使用`text-align: center;`使文本在水平方向居中，对于内联元素，如图片或`&lt;span&gt;`，可以使用`vertical-align: middle;`与父元素的`line-height`配合使其...

    css控制div中元素居中的示例.pdf

    另一种实现元素居中的方法是使用 text-align 属性，设为首页 将该属性值设置为 center 并应用到 body 元素上即可。这种做法是彻头彻尾的 hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。 之所以...

    Div+CSS布局居中

    **基本原理**：通过将`text-align`属性设置为`center`来实现文本或行内元素的水平居中。对于块级元素，可以通过设置`display: inline-block`来实现类似的效果。 **代码示例**： ```css body { text-align: center;...

    divcss布局:CSS布局方法介绍

    **float属性**用于指定元素的浮动方向，它可以有三个值：`none`、`left`、`right`。 - `none`: 默认值，对象不浮动。 - `left`: 文本流向对象右边。 - `right`: 文本流向对象左边。 通过float属性可以实现简单的两...

    GridView固定表头

    text-align: center; background-color: navy; color: white; border-right: 1px solid silver; position: relative; cursor: default; left: expression(document.getElementById("div-datagrid")....

    div居中常见问题.docx

    例如，如果有一个包含文本的`div`元素，只需在CSS中为父`div`设置`.txtCenter{text-align: center;}`即可实现文本的居中对齐。 接下来，我们讨论块状元素的居中。块状元素分为定宽和不定宽两种。对于定宽块状元素，...

    利用after和before实现的一些效果

    **需求描述**：实现一个导航条，使用竖线分割不同的导航项。 **CSS代码**： ```css nav { height: 47px; text-align: center; width: 1100px; background: red; margin: 0 auto; margin-top: 2px; } nav ul ...

    常用DIV+CSS网页制作布局技术技巧

    text-align: center; } #content { margin-left: auto; margin-right: auto; width: 400px; } ``` **2. 两行一列布局** ```html &lt;div id="content-top"&gt; &lt;!-- 顶部内容 --&gt; &lt;/div&gt; &lt;div id="content-end...

    简单的div+css模板适合新手

    text-align: center; background: #FFF; } a:link, a:visited { font-size: 12px; text-decoration: none; } a:hover {} h1, h2 { font-size: 20px; text-align: center; margin: 0 auto; } /* 页面容器 */...

    样式表总结

    - `text-align: center;`（居中对齐） - `text-align: right;`（右对齐） - `text-align: left;`（左对齐） - `text-align: justify;`（两端对齐） #### 2. 垂直对齐方式 (Vertical Alignment) - `vertical-...

    css文字滤镜.pdf

    - **兼容性**：此效果仅在部分旧版IE中可用，现代浏览器通常使用`text-shadow`或其他CSS3滤镜实现类似效果。 2. **blur**：模糊效果。 - **示例代码**： ```html &lt;span style="font-size:30pt;display:block;...

    CSS简介和语法关于网页

    text-align:center; color:red} &lt;h1 class="mylayout"&gt; 这个标题使用了内部样式。 ``` 3. **外部样式表(External Style Sheet)**：外部样式表存储在以`.css`为扩展名的文件中，多个网页可以引用同一个...

    HTML之三种居中

    对于左右居中，可以通过设置`align`属性为`center`来实现。 **示例代码：** ```html &lt;table width="400" height="400" border="1" align="center"&gt; 内容 ``` 在此代码中，`align="center"`使得表格在其容器...

    CSS样式教程

    - **提高兼容性**: 更好的跨浏览器兼容性。 - **提高性能**: 减少页面加载时间，提高用户体验。 #### 二、CSS用法 CSS可以通过以下几种方式应用于HTML文档： - **内联样式**: 直接在HTML标签中使用`style`属性...

Magicbox
Global site tag (gtag.js) - Google Analytics