CSS实例教程:水平对齐(text

日期:2020-08-27 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板


  水平对齐(text-align),用以设置元素内文字的水平对齐方法。
  1.英语的语法
  text-align实际主要参数以下:
英语的语法:text-align:left|right|center|justify
表明:设置元素内文字的水平对齐方法。
主要参数:left:左对齐;right:右对齐;center:垂直居中;justify:两边对齐
原始值:跟访问器的设定相关
承继性:可承继
可用于:block元素

  其各主要参数在访问器内的显示信息如图1所示。

图1水平对齐方法
  前3种对齐方法都很好了解,而最终1种两边对齐(text-align:justify)可让大段的文字看起来较为齐整,但是两边对齐的主要表现将会会由于访问器的不一样而有一定的不一样,如图2所示。

图2不一样访问器针对两边对齐的不一样主要表现
  2.可用于:block元素
  text-align特性仅有对block元素设置才会起效。比如有以下设置:
<pstyle="text-align:right;"><imgsrc="img/ddcat_anim.gif"alt="照片"style="text-align:center;"/></p>

尽管对照片设置了垂直居中对齐,可是在访问器内的实际效果如图3所示。

图3照片与对齐方法
  由图3读者能够看到,由于照片<img>默认设置为inline元素,因此即便界定了“text-align:center;”,也依然同文本1起右对齐。因而不可以立即根据对照片的设置来做到独立照片的对齐。
  假如想让单独照片做到垂直居中的实际效果,应当在其外嵌套循环1个block元素,随后设定这个元素的对齐方法为垂直居中对齐,以下所示:
<pstyle="text-align:center;"><imgsrc="img/ddcat_anim.gif"alt="照片"/></p>

  其实际效果如图4所示。

图4照片垂直居中
  3.承继性
  text-align特性是可承继的。当设置了某个元素的水平对齐方法之后,其子孙后代元素的水平对齐方法都将承继该设置,如图5所示。

图5text-align的承继性
  留意:不一样访问器之间的承继略有区别。比如在Opera中,表头<th>将不承继右对齐,而仍然垂直居中对齐,除非对其专业界定。

  因为text-align特性的承继性,因而在界定情况下必须非常留意,假如子孙后代元素不期待承继水平对齐方法,则必须再各自界定。
  4.运用:总体垂直居中
  尽管text-align用以设置文字的水平对齐方法。可是在IE中,对齐会运用在此元素内全部的子孙后代元素上,比如有以下编码:
<divid="textAlign3"style="text-align:center;">
<pstyle="width:70%;">本段落会在IE内垂直居中显示信息,而在Firefox和Opera内居左显示信息。</p>
</div>

  其在WindowsIE6.0、Firefox2.0和Opera8.5中显示信息的实际效果如图6所示。

图6不一样访问器的区别
  读者能够看到,<p>元素自身也垂直居中显示信息了,因而能够运用此特点来设定网页页面內容在IE内的总体垂直居中实际效果,比如有html构造以下:
<body>
<divid=”wrap”>
<h1>网页页面垂直居中</h1>
<p>设定CSS使网页页面总体垂直居中。</p>
</div>
</body>

  要使<divid=”wrap”>在访问器内垂直居中,则必须设定CSS以下:
body{
text-align:center;/*在IE内垂直居中*/
}
#wrap{
width:90%;/*设置宽度才可以显示信息出垂直居中的实际效果。*/
margin:0auto;/*在Firefox及Opera等访问器内垂直居中。*/
}

  此时在访问器内访问,网页页面内的元素都将垂直居中显示信息,如图7所示。

图7访问器内网页页面总体垂直居中
  留意:此时网页页面内全部的文字都承继<body>的的设置而垂直居中显示信息,因而具体运用中,能够再设置wrap层的对齐方法为左对齐。