text-indent

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;

浏览器支持

语法:

取值:

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

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

• 块级元素的文本是一些堆叠的线框
• 大部分浏览器要使得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

• 我 是 谁
• 你 又 是 谁
• 世 界 末 日 2012

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

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

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

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

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

1. 如果要使得两端对齐生效，需要在单词之间添加空白，如空格
2. 如果一行仅有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;

 
 
 
 left 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 start (ltr) 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 start (rtl) 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 
 
 right 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 end (ltr) 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 end (rtl) 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 
 
 center 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 justify 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 justify-all 
lorem ipsum dolor sit amet, consectetur adipiscing elit. nam pellen tesque vehicu la con vallis.
 
 
 

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
 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.
//CSS
.example {text-align: left;border: solid;}

//html
 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.
//CSS
.example {text-align: center;border: solid;}

//html
 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.
//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}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com