文本的对齐text-align属性和vertical-align属性 text align 两边对齐

文本的对齐 text-align属性和vertical-align属性2009-09-17 11:41在CSS中,文本的对齐包括水平对齐和竖直对齐。分别使用text-align属性和vertical-align属性来控制。

  一、水平对齐

  text-align属性的语法结构如下:

text-align:left/center/right/justify

  其中,left、center、right分别代表的是左对齐、居中对齐、右对齐。最后一个justify是两端对齐的意思,因为它存在着一些缺陷,所以很少使用。text-align属性仅仅作用与块元素。下面来一下示例:

p{text-align:center;}

<p>这是一段使用text-align属性的示例,在这里我们加入一个图片,<br/><imgsrc="pic/007.gif"><br/>请注意图片的位置,这样有助于理解水平对齐属性。</p>

  该样式实现了文本的居中对齐,其应用到页面的效果如下图所示。

文本的对齐text-align属性和vertical-align属性 text align 两边对齐

  二、竖直对齐

  vertical-align属性的语法结构如下所示:

vertical-align:top/middle/bottom/baseline/sub/super/text-top/text-bottom/length

  上述参数中,比较常用的是top、middle、bottom,与text-align属性不同,vertical-align属性仅仅作用与内联元素,所以无法用vertical-align属性控制div等款元素中内容的竖直对齐。这和传统布局中的valign有很大的区别。我们来看一段示例:

img{vertical-align:bottom;}

<p>这是一段使用vertical-align属性的示例,在这里我们加入两个图片,小图<imgsrc="pic/007s.gif">和大图<imgsrc="pic/007.gif">请注意图片的位置,这样有助于理解竖直对齐属性。</p>

  该样式实现了图像的底端对齐,其应用到网页中的效果如下图所示。

  

爱华网本文地址 » http://www.413yy.cn/a/25101011/102990.html

更多阅读

Word中对段落的对齐方式怎么设置 word如何段落对齐

Word中对段落的对齐方式怎么设置——简介一篇不错的文章,除了要有丰富和详细的内容之外,还要有漂亮和庄重的外观。这就需要我们对文章进行校对后的排版和修饰了,其次是进行文章段落格式的设置,那么怎么去区分段落呢,在Word中只要敲回车键

转载 王海滨的一则声明:关于生存主义和逃难

原文地址:王海滨的一则声明:关于生存主义和逃难作者:海滨政经述-橡谷智库我在很久以前,根据波斯尼亚幸存者的自叙,写了一篇小说<破城>.这是一篇关于灾难的生存主义小说,反映的是我一贯的对人类社会的悲观情绪,以及一种消极的生存主义哲

读张国焘《我的回忆》 张国焘和 我的回忆

知道张国焘的名字,都是从他的分裂中央开始的。在我们的教科书中,他和陈独秀、李立三、王明一样是错误路线的代表,是阻碍毛主席正确路线的绊脚石。不过和以上领袖不同,他的错误发生或者说是站起来和毛叫板的时间是自“遵义会议”以后,也就

声明:《文本的对齐text-align属性和vertical-align属性 text align 两边对齐》为网友烟寂寞相随分享!如侵犯到您的合法权益请联系我们删除