CSS text-align设置文本的水平对齐方式属性笔记

原创 国哥笔记  2018-09-27 21:34  阅读 1,406 views 次

text-align属性定义及用法

css中,text-align属性是用来设置文本的水平对齐方式,我们可以使用text-align属性来设置元素中的文本排列到右边、左边、中间以及实现两端对齐文本效果。目前大部分浏览器都已经支持该属性。

 

text-align属性语法格式

css语法:text-align: left / right / center / justify / inherit;

JavaScript 语法: object.style.textAlign="left / right / center / justify / inherit";

 

text-align属性值说明

  • left:文本显示在容器的左边(默认值);
  • right :文本显示在容器的右边;
  • center:文本显示在容器的中间;
  • justify:实现两端对齐文本效果;
  • inherit:从父元素继承text-align属性的属性值。

 

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS text-align设置文本的水平对齐方式属性笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c,#d{width: 400px;border: 1px solid red;margin-top: 20px;}
#a{text-align: right;}
#b{text-align: center;}
#c{text-align:justify;}
span{display:inline-block;width:100%;}
</style>
</head>
<body>
<div id = "a">right:文本显示在容器的右边</div>
<div id = "b">center:文本显示在容器的中间</div>
<div id = "c">justify:实现两端对齐文本效果<span></span></div>
</body>
</html>

运行结果:

CSS text-align设置文本的水平对齐方式属性笔记

说明:当text-align属性的属性值为justify时(即实现两端对齐文本效果),不会处理被打断的行和最后一行。所以,以上实例如果不使用span元素处理,直接text-align属性设置为justify不会产生任何效果,因为不使用span元素处理,实例中的文字只占了一行,也是最后一行了,所以将不会有效果。我们可以使用text-align-last属性来代替text-align属性就不会有这个问题,但是text-align-last属性不是所有浏览器都支持,处理起来也比较麻烦,所以可以采用本实例中的方法。

以上实例使用了span元素来解决justify属性值不会产生任何效果的问题,将span设置为inline-block,设置宽度100%,这个时候内联匿名盒的宽度超过行盒,就会出现换行,就形成了两行,这个时候第一行的文本的justify效果就生效了。

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-align.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情