CSS text-align属性,设置水平对齐
text-align属性
CSS中的text-align属性不但可以用于设置文本的水平对齐方式,也可以用于设置其它的一些HTML元素相对父元素的水平对齐方式,具体可见下方实例。
text-align属性值
属性值 | 描述 |
---|---|
left | 左对齐 |
right | 右对齐 |
center | 居中对齐 |
justify | 拉伸每一行,使每一行具有相等宽度 |
text-align设置文本对齐方式
段落p元素是块级元素,可以直接通过text-align属性来设置段落中文本的对齐方式:
<p class='t-a-l'>左对齐</p>
<p class='t-a-r'>右对齐</p>
<p class='t-a-c'>居中对齐</p>
<p class='t-a-j'>
DeprecationWarning: time.clock has been deprecated in Python 3.3 and will be removed from Python 3.8: use time.perf_counter or time.process_time instead
</p>
<style>
.t-a-l{text-align:left;}
.t-a-r{text-align:right;}
.t-a-c{text-align:center;}
.t-a-j{text-align:justify;border:1px solid skyblue;width:100%;}
</style>
text-align设置其它元素水平对齐方式
设置HTML元素的对齐方式,一般将text-align属性设置在其父元素上:
<div class='t-a-d1'>
<img class='t-a-d2'src='../../static/img/test.jpg'>
<!-- 注意,这是图片 -->
</div>
<style>
.t-a-d1{text-align:center;width:100%;height:50%;border:1px solid orange;}
.t-a-d2{width:50%;height:50%;}
</style>
text-align设置行内元素水平对齐方式
一般情况下,行内元素设置text-align属性是无法进行相关的对齐的,比如实例中的span元素,那该怎么办呢?可以将span元素的display属性设置为block:
<span style='text-align:center'>该span居中对齐没有效果</span><br><br>
<span style='text-align:center;display:block;'>该span居中对齐会有效果</span>