text-align

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。

示例

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;

浏览器支持


浏览器都支持`text-align`

语法:

text-align:left| right| center| justify| start| end| match-parent| justify-all

取值:

left:内容左对齐。
center:内容居中对齐。
right:内容右对齐。
justify:内容两端对齐，但对于强制打断的行（被打断的这一行）及最后一行（包括仅有一行文本的情况，因为它既是第一行也是最后一行）不做处理。
start:（CSS3新增）内容对齐开始边界。
end:（CSS3新增）内容对齐结束边界。
match-parent:（CSS3新增）这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的<direction>值并计算的，计算值可以是left和right。
justify-all:（CSS3新增）效果等同于justify，但还会让最后一行也两端对齐。

默认值	start
适用于	块容器
继承性	有
动画性	否
计算值	指定值

设置或检索对象中内容的水平对齐方式。

块级元素的文本是一些堆叠的线框
大部分浏览器要使得text-align的justify两端对齐生效，需要在汉字间插入有空白，如空格；
块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行，其两端对齐需使用text-align-last
IE浏览器下，如果text-align-last要生效，必须先定义text-align:justify

单行两端对齐效果变得比较简单:

//CSS
li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}
li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}

//HTML
<ul>
	<li>我 是 谁</li>
	<li>你 又 是 谁</li>
	<li>世 界 末 日 2012</li>
</ul>

以上代码3个li中的内容都将两端对齐

需注意几点:

所有主流浏览器都支持text-align的justify属性值；
text-align不处理强制打断的行，也不处理块内的最后一行，换句话说，如果块内仅有一行文本（该行既是第一行也是最后一行），这时仅设置text-align:justify无法让该行两端对齐；
text-align-last是用来处理块内的最后一行和强制打断的行的，所以当要设置单行文本两端对齐时，需使用该属性；
大部分浏览器要使得两端对齐生效，需在文本间插入空白，如空格（如果一行仅有2个汉字，Firefox也需在之间插入空白）；
大部分浏览器尚不支持text-align-last

依据上述的点，要实现单行两端对齐，可以走2个方向:

由于所有浏览器都支持text-align的justify属性值，但不全支持text-align-last，我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容（IE7及以下浏览器不支持伪对象，使用text-align-last处理），置于第二行并将其隐藏，这时第一行文本（即要对齐的那个单行文本）可使用text-align:justify来对齐
支持text-align-last的浏览器，如IE，Firefox使用text-align-last处理，不支持的浏览器使用如上述方法处理；

所以就目前情况来看，使用第一种方案是比较简约的，可以轻易的兼容IE5.5-10，Firefox，Chrome，Safari，Opera

如果要使得两端对齐生效，需要在单词之间添加空白，如空格
如果一行仅有2个汉字，较低版本的Firefox也需在之间插入空白

text-alignCSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。

/* keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

/* block alignment values (non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;

/* global values */
text-align: inherit;
text-align: initial;
text-align: unset;

<div class="grid">
	 <div class="col">
		 <div class="row">
			 <div class="cell">
			 left
			 <p class="taleft">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 <div class="cell">
			 start (ltr)
			 <p class="tastart ltr">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 <div class="cell">
			 start (rtl)
			 <p class="tastart rtl">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 </div>
			 <div class="row">
			 <div class="cell">
			 right
			 <p class="taright">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 <div class="cell">
			 end (ltr)
			 <p class="taend ltr">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 <div class="cell">
			 end (rtl)
			 <p class="taend rtl">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 </div>
			 <div class="row">
			 <div class="cell">
			 center
			 <p class="tacenter">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 <div class="cell">
			 justify
			 <p class="tajustify">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
			 <div class="cell">
			 justify-all
			 <p class="tajustifyall">lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.</p>
			 </div>
		 </div>
	 </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #eee;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  width: calc(33.33% - 1em);
  box-sizing: border-box;
  margin: .5em;
  padding: .5em;
  overflow: hidden;
}

@media (max-width: 30em) {
  .row {
    flex-direction: column;
  }
}

p {
  font: .8em sans-serif;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  resize: horizontal;
  background: #e4f0f5;
  padding: .5em;
  margin: .5em 0 0;
}

.taleft       { text-align: left;        }
.taright      { text-align: right;       }
.tacenter     { text-align: center;      }
.tajustify    { text-align: justify;     }
.tajustifyall { text-align: justify-all; }
.tastart      { text-align: start;       }
.taend        { text-align: end;         }

.rtl { direction: rtl; }
.ltr { direction: ltr; }

//html
<p class="example">
  integer elementum massa at nulla placerat varius.
  suspendisse in libero risus, in interdum massa.
  vestibulum ac leo vitae metus faucibus gravida ac in neque.
  nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

//CSS
.example {text-align: left;border: solid;}

//html
<p class="example">
  integer elementum massa at nulla placerat varius.
  suspendisse in libero risus, in interdum massa.
  vestibulum ac leo vitae metus faucibus gravida ac in neque.
  nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

//CSS
.example {text-align: center;border: solid;}

//html
<p class="example">
  integer elementum massa at nulla placerat varius.
  suspendisse in libero risus, in interdum massa.
  vestibulum ac leo vitae metus faucibus gravida ac in neque.
  nullam est eros, suscipit sed dictum quis, accumsan a ligula.
</p>

//CSS
.example {text-align: justify; border: solid;}

.something {margin: auto;}
.something {margin: 0 auto;}
.something {margin-left: auto; margin-right: auto;}

h1{text-align:center}
h2{text-align:left}
h3{text-align:right}