CSS文本对齐text-align详解
1.语法
text-align具体参数如下：
说明：设定元素内文本的水平对齐方式。
参数：left : 左对齐；right : 右对齐；center : 居中；justify : 两端对齐
初始值：跟浏览器的设置有关
继承性：可继承
适用于：block元素
其各参数在浏览器内的显示如图1所示。
图1 水平对齐方式
前三种对齐方式都很好理解，而最后一种两端对齐（text-align:justify）可以让大段的文本看起来比较整齐，不过两端对齐的表现可能会因为浏览器的不同而有所不同，如图2所示。
图2 不同浏览器对于两端对齐的不同表现
2.适用于：block元素
text-align属性只有对block元素设定才会生效。例如有如下设定：
虽然对图片设定了居中对齐，但是在浏览器内的效果如图3所示。
图3 图片与对齐方式
由图3读者可以看到，因为图片<img>默认为inline元素，所以即使定义了“text-align:center;”，也仍然同文字一起右对齐。因此不能直接通过对图片的设定来达到单独图片的对齐。
如果想让单个图片达到居中的效果，应该在其外嵌套一个block元素，然后设置这个元素的对齐方式为居中对齐，如下所示：
其效果如图4所示。
图4 图片居中
3.继承性
text-align属性是可继承的。当设定了某个元素的水平对齐方式以后，其子孙元素的水平对齐方式都将继承该设定，如图5所示。
图5 text-align的继承性
由于text-align属性的继承性，因此在定义时候需要特别注意，如果子孙元素不希望继承水平对齐方式，则需要再分别定义。
4.应用：整体居中
虽然text-align用以设定文本的水平对齐方式。但是在IE中，对齐会应用在此元素内所有的子孙元素上，例如有如下代码：
<p style="width:70%;">本段落会在IE内居中显示，而在Firefox和Opera内居左显示。</p>
</div>
其在Windows IE 6.0、Firefox 2.0和Opera 8.5中显示的效果如图6所示。
图6 不同浏览器的差别
读者可以看到，<p>元素本身也居中显示了，因此可以利用此特性来设置页面内容在IE内的整体居中效果，例如有html结构如下：
<div id=”wrap”>
<h1>页面居中</h1>
<p>设置CSS使页面整体居中。</p>
</div>
</body>
要使<div id=” wrap”>在浏览器内居中，则需要设置CSS如下：
text-align: center; /* 在IE内居中 */
}
#wrap {
width: 90%; /* 设定宽度才能显示出居中的效果。*/
margin: 0 auto; /* 在Firefox及Opera等浏览器内居中。*/
}
此时在浏览器内浏览，页面内的元素都将居中显示，如图7所示。
图7 浏览器内页面整体居中
CSS文本对齐text-align详解的更多相关文章
- Linux文本编译工具VIM详解
Linux文本编译工具VIM详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.VIM概述 1>.vim简介 >.vi: 全称Visual editor,即文本编辑 ...
- phaser学习总结之Text对象详解
前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...
- Linux 文本对比 diff 命令详解（整理）
diff 命令详解 1.概述 windows系统下面就有不错的文本对比工具可以使用,例如常用的Beyond Compare,WinMerge都是图形界面的比较工具而且使用非常方便,如果你仅仅是在win ...
- CSS系列 (05)：浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
- Flutter Container 组件、Text 组件详解
Text 组件 textAlign 文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection 文本方向(ltr 从左至右 ...
- CSS样式----CSS属性：字体属性和文本属性（图文详解）
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
随机推荐
- mydate97时间插件集成jquery插件
1.初始化JS: //把mydate97时间插件集成jquery插件 (function ($) { $.fn.mydatePicker = function (options) { return t ...
- Refresh Tokens: When to Use Them and How They Interact with JWTs
In this post we will explore the concept of refresh tokens as defined by OAuth2. We will learn why t ...
- unity, StartCoroutine and StopCoroutine
startCoroutine("func",1.0f)可以用stopCoroutine("func")来停. startCoroutine(func(1.0f) ...
- QSettings 使用实例 当需要在程序关闭时保存”状态“信息
用户对应用程序经常有这样的要求:要求它能记住它的settings,比如窗口大小,位置,一些别的设置,还有一个经常用的,就是recent files,等等这些都可以通过Qsettings来实现. 我们知 ...
- Ubuntu下安装RabbbitVCS（图形化svn管理工具）- Ubuntu也有TortoiseSVN
在Windows下用惯了TortoiseSVN这只小乌龟,到了Ubuntu下很不习惯命令行的SVN,于是经过一番寻找安装了RabbitVCS这款SVN图形化前端工具(官方网站:http://rabbi ...
- 转：Linux下随机10字符病毒的清除
病毒表现:网络流量暴满,疯狂地向香港的一个IP发数据,同时在top里面表现为随机的10位字母的进程,看/proc里面的信息,则为ls,cd之类常见的命令,CPU利用率也在top之首.杀死该进程后,会再 ...
- JsonNode、JsonObject常用方法
最近项目中要用json,闲暇时间,对json进行下总结. 1.JsonNode 项目中用到的jar包 import com.fasterxml.jackson.core.JsonParseExce ...
- JavaScript匿名类整理学习笔记
以下为总结在开源的JavaScript框架中能看到很多这样语法结构(function(){})()比如我最近看的jQuery,及chediter.刚开始的时候我看到这样的结果有点奇怪,它是怎么执行的, ...
- Ubuntu 16.04 更换阿里云源
Ubuntu 16.04 更换阿里云源sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份sudo gedit /etc/apt/so ...
- final可以修饰类、属性、方法
final可以修饰类.属性.方法. 当用final修饰类的时候,此类不可被继承,即final类没有子类.这样可以用final保证用户调用时动作的一致性,可以防止子类覆盖情况的发生. 当利用final修 ...