我们在网站建设,网站设计的时候,经常使用CSS的网页文字对齐text-align和vertical-align。
其语法格式如下:
text-align:left | right | center | justify
vertical-align:top |bottom | text-top | text-bottom | baseline | middle | sub | super
CSS说明:
1,text-align用于网页文字的水平对齐,但这块属性只用于整块内容,如<p>,<h1>,<ul>等。
left 左对齐,默认的。
right 右对齐。
center 居中。
justify 左右对齐。
2,vertical-align用于控制文字或其他网页对象相对于母体对象的垂直位置。
top 垂直顶部对齐。
bottom 垂直底部对齐。
text-top 将对象的顶部同文字的顶部对齐。
text-bottom 将对象的底部同文字的底部对齐。
baseline 基准线对齐,默认对齐方式。
middle 垂直居中对齐。
sub 将对象以下标的形式显示。
super 将对象以上标的形式显示。
vertical-align举例:
<html>
<head>
<title>vertical-align 垂直对齐属性</title>
<style type="text/css">
<!--
#base{vertical-align:base-line}
#mid{vertical-align:middle}
-->
</style>
</head>
<body bgcolor=lightyellow>
<center>
<font size=5 color=red>vertical-align 垂直对齐属性的应用</font>
</cernter>
<table bordr=2 height=200>
<tr bgcolor=lightgreen align=center>
<td>设置vertical-align的属性</td><td>结果</td>
<td>设置vertical-align的属性</td><td>结果</td>
</tr>
<tr>
<td id=base>vertical-align:base</td>
<td id=base><img src="logo.gif"></td>
<!--在td标签内利用id选择符,引用base-->
<td id=mid>vertical-align:middle</td>
<td id=mid><img src="logo.gif"></td>
<!--在td标签内利用id选择符,引用mid-->
</tr>
</table>
</center>
</body>
</html>
本课主题:网页文字对齐text-align和vertical-align
相关主题:
设置网页文字行距
网页文字间距和字母间距
文字属性font
网站文字修饰text-decoration
网页文字大小写
请拨打热线:0571-86586571

