1.语法

text-align具体参数如下：

语法：text-align : left | right | center | justify 
说明：设定元素内文本的水平对齐方式。 
参数：left : 左对齐；right : 右对齐；center :  居中；justify :  两端对齐 
初始值：跟浏览器的设置有关 
继承性：可继承 
适用于：block元素 

　　其各参数在浏览器内的显示如图1所示。

图1 水平对齐方式

　　前三种对齐方式都很好理解，而最后一种两端对齐（text-align:justify）可以让大段的文本看起来比较整齐，不过两端对齐的表现可能会因为浏览器的不同而有所不同，如图2所示。

图2 不同浏览器对于两端对齐的不同表现

　　2.适用于：block元素

　　text-align属性只有对block元素设定才会生效。例如有如下设定：

<p style="text-align:right;"><img src="img/ddcat_anim.gif" alt="图片" style="text-align:center;" /></p> 

虽然对图片设定了居中对齐，但是在浏览器内的效果如图3所示。

图3 图片与对齐方式

　　由图3读者可以看到，因为图片<img>默认为inline元素，所以即使定义了“text-align:center;”，也仍然同文字一起右对齐。因此不能直接通过对图片的设定来达到单独图片的对齐。 
　　如果想让单个图片达到居中的效果，应该在其外嵌套一个block元素，然后设置这个元素的对齐方式为居中对齐，如下所示：

<p style="text-align:center;"><img src="img/ddcat_anim.gif" alt="图片" /></p> 

　　其效果如图4所示。

图4 图片居中

　　3.继承性

　　text-align属性是可继承的。当设定了某个元素的水平对齐方式以后，其子孙元素的水平对齐方式都将继承该设定，如图5所示。

图5 text-align的继承性

　　注意：不同浏览器之间的继承略有差别。例如在Opera中，表头<th>将不继承右对齐，而依然居中对齐，除非对其专门定义。 

　　由于text-align属性的继承性，因此在定义时候需要特别注意，如果子孙元素不希望继承水平对齐方式，则需要再分别定义。

　　4.应用：整体居中 
　　虽然text-align用以设定文本的水平对齐方式。但是在IE中，对齐会应用在此元素内所有的子孙元素上，例如有如下代码：

<div id="textAlign3" style="text-align:center;"> 
  <p style="width:70%;">本段落会在IE内居中显示，而在Firefox和Opera内居左显示。</p> 
</div> 

　　其在Windows IE 6.0、Firefox 2.0和Opera 8.5中显示的效果如图6所示。

图6 不同浏览器的差别

　　读者可以看到，<p>元素本身也居中显示了，因此可以利用此特性来设置页面内容在IE内的整体居中效果，例如有html结构如下：

<body> 
  <div id=”wrap”> 
    <h1>页面居中</h1> 
    <p>设置CSS使页面整体居中。</p> 
</div> 
</body> 

　　要使<div id=” wrap”>在浏览器内居中，则需要设置CSS如下：

body { 
text-align: center;  /* 在IE内居中 */ 
} 
#wrap { 
width: 90%;  /* 设定宽度才能显示出居中的效果。*/ 
margin: 0 auto;  /* 在Firefox及Opera等浏览器内居中。*/ 
} 

　　此时在浏览器内浏览，页面内的元素都将居中显示，如图7所示。

图7 浏览器内页面整体居中

　　注意：此时页面内所有的文本都继承<body>的的设定而居中显示，因此实际应用中，可以再设定wrap层的对齐方式为左对齐。

CSS文本对齐text-align详解的更多相关文章

  1. Linux文本编译工具VIM详解

    Linux文本编译工具VIM详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.VIM概述 1>.vim简介 >.vi: 全称Visual editor,即文本编辑 ...

  2. phaser学习总结之Text对象详解

    前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...

  3. Linux 文本对比 diff 命令详解（整理）

    diff 命令详解 1.概述 windows系统下面就有不错的文本对比工具可以使用,例如常用的Beyond Compare,WinMerge都是图形界面的比较工具而且使用非常方便,如果你仅仅是在win ...

  4. CSS系列 (05)：浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  5. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  6. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  7. css文本样式text、字体样式font

    文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

  8. Flutter Container 组件、Text 组件详解

    Text 组件 textAlign     文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection   文本方向(ltr 从左至右 ...

  9. CSS样式----CSS属性：字体属性和文本属性（图文详解）

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

随机推荐

  1. nexus 配置

    1.下载 http://www.sonatype.org/nexus/go/  例如:nexus-2.11.4-01-bundle.tar.gz 2.解压 tar -xzvf nexus-2.11.4 ...

  2. java后台分页实例一

    后台框架:jfinal + velocity.前台框架:jquery  页面 <!DOCTYPE html> <html> <head> <meta char ...

  3. Jquery 大纲

    1,核心 核心函数 对象訪问 数据缓存 队列控制 插件机制 多库共存 2.选择器 基本选择器 层级 基本 内容 可见性 属性 子元素 表单 表单对象属性 3.文档处理 内部插入 外部插入 包裹 替换 ...

  4. C# 获得文件名

    string strFilePaht="文件路径"; Path.GetFileNameWithoutExtension(strFilePath);这个就是获取文件名的 还有的就是用 ...

  5. Launcher代码大全

    蜂窝网络:prefs:root=MOBILE_DATA_SETTINGS_ID VPN:prefs:root=General&path=Network/VPN Wi-Fi:prefs:root ...

  6. 在windows中使用Navicat连接Linux虚拟机中的mysql数据库

    今天想用navicat远程连接虚拟机中的MySQL数据库,一直连不上,在网上搜索了一下,发现原因是MySQL对远程用户登陆的授权问题.这里说一下我的解决方法.(本人小白) 首先,我用navicat去远 ...

  7. ios界面跳转

    import Foundationimport UIKit class MyViewController: UIViewController{ // var window: UIWindow? ove ...

  8. java中虚拟机命令：jstack使用方法

    Stack Trace for Java,用于生成虚拟机当前的线程快照信息,包含每一条线程的堆栈信息.该命令通常用于定位线程停顿原因,当出现线程停顿时,可通过stack查看每个线程的堆栈信息,进而分析 ...

  9. groupBox和panel

    private void Form1_Load(object sender, EventArgs e) { groupBox1.Text = "信息表"; panel1.Borde ...

  10. hdu6153 扩展kmp求一个字符串的后缀在另一个字符串出现的次数。

    /** 题目:hdu6153 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6153 题意:给定两个串,求其中一个串t的每个后缀在另一个串s中出现的次数乘以 ...