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>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.