css文本对齐方式 CSS段落对齐方式 千次阅读
2021-08-04 09:27:24
CSS段落对齐有两种方式：水平对齐和垂直对齐。

1.水平对齐：

(1)、text-align：left; //左对齐

(2)、text-align：right; //右对齐

(3)、text-align：center; //居中对齐

(4)、text-align：justify; //两端对齐

2.垂直对齐：

(1)、vertical-align：top; //顶部对齐

(2)、vertical-align:bottom; //底部对齐

(3)、vertical-align:middle; //中间对齐

【CSS】定义元素的对齐方式

1.文本内容居中对齐:text-align.扩展用法:父元素嵌套子元素时,且子元素的宽度小于父元素宽度,使用text-align:center,可以实现子元素的居中对齐. ..

测开之路九十三：css之文字样式和段落对齐

引用css 字体族字体类型和尺寸 em:字体按倍数缩放 font-weight:调整文字的粗细段落对齐:text-align 左对齐:left 右对齐:right 居中对齐:center 两边对齐 ...

css text-align-last设置末尾文本对齐方式

text-align-last:auto | start | end | left | right | center | justify auto: 无特殊对齐方式. left: 内容左对齐. cen ...

css属性之统一设置文本及div之间的对齐方式

设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效.hdp-uf{ display: -webkit-box; /* 老版本语法: Safari, iOS ...

精通CSS+DIV网页样式与布局--CSS段落效果

在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...

python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

一.列表标签列表标签分为三种. 1.无序列表

,无序列表中的每一项是
英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
CSS文本对齐text-align详解
1.语法 text-align具体参数如下: 语法:text-align : left | right | center | justify 说明:设定元素内文本的水平对齐方式. 参数:left : ...
CSS——段落处理
...
Day46(列表标签，表格标签，表单标签，css的引入方式，css选择器)
一.列表标签列表标签分为三种. 1.无序列表

,无序列表中的每一项是
英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
随机推荐
CSS网页制作常用标签
做了一个简单的网页,从布局到加内容,遇到了很多小问题.很多标签和属性都不会用或者忘记了.所以以此记录一下. 一.如何将边框四角变圆?(或做一个圆形) 顾名思义,如果要更改边框的角需要用到边框(bord ...
使用block进行界面之间的反向传值
目标:在两个独立的控制器的界面之间进行反向传值关键技术:block 代码编写及运行环境:Xcode6.4 / 模拟器8.4 语言:Objective-C 注:使用纯代码实现,不使用xib/story ...
Java集合类学习笔记(Map集合)
Map用于保存具有映射关系的数据,因此Map集合里保存着两组数据,一组用于保存Map的key,一组用于保存key所对应的value. Map的key不允许重复. HashMap和Hashtable都是 ...
基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
在前面介绍了很多篇相关的的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...
75&period;Android之基本架构
转载:http://www.cnblogs.com/lijunamneg/archive/2013/01/18/2866953.html Android其本质就是在标准的Linux系统上增加了Java ...
Oracle VM VirtualBox 虚拟机与主机共享文件
安装增强功能(参考文档) VirtualBox自带了一个增强工具Sun VirtualBox Guest Additions,这是实现虚拟机与真实主机共享的关键.启动虚拟机后,点击控制菜单“设备”→“ ...
Python中的图形库
Python中的图形库根据Python 2.x的官网文档的解释: Graphical User Interfaces with Tk 和 Other Graphical User Interface ...
ZOJ 3728 Collision
---恢复内容开始--- 今天无事水一水,结果就看到这个水题了! 题意思是有俩个区域如图求在俩个圆之间的运动时间给出初始的开始点和速度的矢量式;而且这个点不再俩个圆之间的区域,且碰到内测园会 ...
5&period;关于QT中的网络编程，QTcpSocket，QUdpSocket
1 新建一个项目:TCPServer.pro A 修改TCPServer.pro,注意:如果是想使用网络库,需要加上network SOURCES += \ TcpServer.cpp \ T ...
Object&period;assign简单总结
定义 Object.assign方法用来将源对象source的所有可枚举属性复制到目标对象target.至少需要两个对象作为参数,第一个参数为源对象,后面的均为目标对象.(以下用source代指源对象 ...
更多相关内容

CSS中文本对齐方式-文本处理案例

千次阅读 2021-08-13 17:40:32

文本对齐方式 CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单 p{ text-align: center; text-align: left; text-align: right; } 但是两端对齐你有用过吗？只需要...

多行文本垂直居中

父级
display: table;

子级
display: table-cell;
vertical-align: middle;
text-align: center;

文本对齐方式

CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单

p{
 text-align: center;
 text-align: left;
 text-align: right;
}

但是两端对齐你有用过吗？

只需要添加text-align-last:justify样式即可

<div class="justify-text">
 <div class="li">账号</div>
 <div class="li">密码</div>
 <div class="li">电子邮件</div>
</div>

scss样式

.justify-text {
	.li {
		padding: 0 20px;
 margin-top: 10px;
		width: 100px;
		background-color: #f13f84;
		line-height: 40px;
		text-align-last: justify;
		color: #fff;
 list-style: none;
		&:first-child {
			margin-top: 0;
		}
	}
}

文本排版方向

现代书本上的文字都是从左到右的顺序排列，但是古时候不同，文字都是从右至左排列的，现在在很多古籍、牌坊、石碑等上面依旧可以看到从右至左的文字。

css也可以调整文本排版方向，是通过什么属性控制的呢？

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr：垂直方向内内容从上到下，水平方向从左到右
sideways-rl：内容垂直方向从上到下排列
sideways-lr：内容垂直方向从下到上排列

<div class="bruce flex-ct-x">
	<div class="vertical-text">
		<h3>诗经</h3>
		<p>
 死生契阔，<br>
 与子成说。<br>
 执子之手，<br>
 与子偕老。
 </p>
	</div>
</div>

scss样式

.vertical-text {
	writing-mode: vertical-rl; // 文字排版方向
	h3 {
		padding-left: 10px;
		font-weight: bold;
		font-size: 18px;
		color: #d60f5c;
	}
	p {
		line-height: 30px; // 行间距
 letter-spacing: 7px; // 文字间距
		color: #ee1166;
	}
}

文本从右至左排列

<div class="reverse-text">
 红豆生南国<br/>
 春来发几枝<br/>
 愿君多采撷<br/>
 此物最相思
</div>

scss样式

.reverse-text {
	font-weight: bold;
	font-size: 30px;
	color: #f13f84;
 width: 200px;
	letter-spacing: -70px; // letter-spacing最少是font-size的2倍
}

文本溢出控制

文本溢出处理不管是PC或者是H5，都是非常常见的，非详情页面都会经常用到。

文本溢出处理分为：单行文字溢出和多行文字溢出。下面看看具体示例：

单行文字溢出

<div class="ellipsis">昨夜雨疏风骤，浓睡不消残酒。试问卷帘人，却道海棠依旧。知否，知否，应是绿肥红瘦。</div>

scss样式

.ellipsis {
 width: 200px;
	overflow: hidden; // 溢出隐藏
	text-overflow: ellipsis; // 溢出修饰 ellipsis省略号
	white-space: nowrap; // 文本不会换行
}

多行文字溢出

<div class="ellipsis">寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急！雁过也，正伤心，却是旧时相识。
满地黄花堆积，憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑！梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！</div>

scss样式

.ellipsis {
 width: 400px;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	/* autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
}

注意

使用文本溢出处理时，容器一定要定义宽度。

多行文字溢出，scss样式添加注释autoprefixer: off并不是为了说明什么，而是，在webpack打包编译时，如果没有这个注释，-webkit-box-orient: vertical会被忽略掉。

文本选择颜色

在浏览器中，当你选择文本想要copy时，是不是会发现选择文本会有背景色和文字颜色呢？其实它是可以通过css定义的。

使用::selection自定义文本选择颜色

<div class="select-color">
 <p>红豆生南国，</p>
 <p class="special">春来发几枝。</p>
 <p>愿君多采撷，</p>
 <p class="special">此物最相思。</p>
</div>

scss样式

// 全局文本选择样式
::selection {
	background-color: #f13f84;
	color: #fff;
}
.select-color {
	line-height: 30px;
	font-weight: bold;
	font-size: 30px;
	color: #d60f5c;
}
// 具体某个选择器下 文本选择样式
.special::selection {
	background-color: #00b7a3;
}

收起

展开全文

selection

CSS文本对齐

2022-01-29 13:51:17

1.居中对齐代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...

1.居中对齐

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐</title>

    <style>
         h1{
             /* 本质是让h1盒子里面的文字水平居中对齐 */
             text-align: center;
         }
    </style>

</head
>
<body>
         <h1>居中对齐标题</h1>    
</body>

</html>

运行效果：

2.右对齐

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐</title>

    <style>
         h1{
             /* 本质是让h1盒子里面的文字右对齐*/
             text-align: right;
         }
    </style>

</head
>
<body>
         <h1>标题右对齐</h1>    
</body>

</html>

运行效果：

3.左对齐

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐</title>

    <style>
         h1{
             /* 本质是让h1盒子里面的文字左对齐 */
             text-align: left;
         }
    </style>

</head>

<body>
         <h1>标题左对齐</h1>    
</body>

</html>

运行效果：

收起

展开全文

html

CSS——文字对齐方式

万次阅读 2018-10-15 10:40:51

横向对齐方法1：单行块级元素水平居中只用添加text-align即可，如P标签，垂直居中vertical-align只适用于行内元素与单元格，所以设置行高与块高度相同即可 text-align: center; 方法2：普通的文本居中只要设置text...

横向对齐

方法1：单行块级元素水平居中只用添加text-align即可，如P标签，垂直居中vertical-align只适用于行内元素与单元格，所以设置行高与块高度相同即可

text-align: center;

方法2：普通的文本居中只要设置text-align即可，但是这个设置了P标签的宽度，则是在该宽度内进行居中，则应该设置margin进行居中

    .content  p
    		{
    		 		  width:500px;
                      font-family: "微软雅黑";
                      margin: 0 auto;
            }

纵向对齐

基本方法：

vertical-align: middle;

设置多行文本元素垂直居中的时候将父元素设置成表格，子元素设置成单元格即可使用vertical
可以在vertical-align中输入正负像素让他进行上下偏移

.content
			{    
              display: table-cell;
              vertical-align: middle;
		    }

竖直对齐的多种方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本样式</title>
	<style type="text/css">
		p{background-color: #ececec; height: 80px;font-size: 20px;}
		span{color:red;font-size: 14px;}    
        .sub{vertical-align: sub;}
        .super{vertical-align: super;}
		img{width: 130px;height:40px;}


		.baseLine{vertical-align: baseline;}
		.top{vertical-align: top;}
		.textTop{vertical-align: text-top;}
		.middle{vertical-align: middle;}
		.textBottom{vertical-align: text-bottom;}
		.bottom{vertical-align: bottom;}
        
        td{height:80px; width:100px;} 
	</style>
</head>
<body>
	<b>----sub和super值----</b>
	<p>CSS层叠样式表<span class="sub">sub</span></p>
    <p class="sub">CSS层叠样式表<span >sub</span></p>
	<p>CSS层叠样式表<span class="super">super</span></p>


	<b>----baseline、top、text-top、middle、bottom、text-bottom值----</b>
	<p>
		CSS层叠样式表			
		<span>（Cascading Style Sheets）</span>
		<img src="img/logo.png"/>
	</p>
	<p>
		CSS层叠样式表		
		<span class="baseLine">基线baseline</span>
		<img src="img/logo.png" class="baseLine"/>	
	</p>
	<p>
		CSS层叠样式表
		<span class="top">顶端对齐top</span>
		<img src="img/logo.png"/>				
	</p>
	<p>
		CSS层叠样式表
		<span class="textTop">文本的顶端对齐textTop</span>
		<img src="img/logo.png"/>		
	</p>
	<p>
		CSS层叠样式表
		<span class="middle">中部对齐middle</span>
		<img src="img/logo.png" class="middle"/>			
	</p>	
	
	<p>
		CSS层叠样式表
		<span class="textBottom">文字底端对齐textBottom</span>
		<img src="img/logo.png"/>		
	</p>
	<p>
		CSS层叠样式表
		<span class="bottom">底端对齐bottom</span>
		<img src="img/logo.png" class="bottom"/>		
	</p>

	<b>----长度和百分比的值----</b>    
	<p>
		CSS层叠样式表
		<span style="vertical-align:-15px;">长度值</span>
		<img src="img/logo.png"/>			
	</p>

	<p style="line-height: 1.5em;">
		CSS层叠样式表
		<span style="vertical-align:-100%;">百分比值</span>
		<img src="img/logo.png"/>			
	</p>

	<b>----应用于单元格元素----</b>
	<table border="1px" class="one" cellspacing="0" >
		<tr>
			<td class="top"><span>top</span></td>
			<td class="middle"><span>middle</span></td>
			<td class="bottom"><span>bottom</span></td>
		</tr>		
	</table>
	
</body>
</html>

展示效果：

在这里插入图片描述

收起

展开全文

CSS中的文字对齐问题
千次阅读 2021-11-04 19:37:06

要了解css中文字的对齐问题，首先要了解文字在浏览器中的基线baseline，基线在浏览器的位置如图所示： ...要解决行内块元素/行内元素的对齐的问题我们就要用到垂直对齐方式vertical-align标签，vertical

收起

html
css怎么设置文本左对齐
千次阅读 2021-08-04 06:24:27

text-align属性用于指定元素中的文本的水平对齐方式，当值为left时可把文本排列到左边。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。在css中，可以通过给文字所在标签添加“text-align:left...

收起
css文本对齐使用哪个属性
千次阅读 2021-06-18 06:28:46

CSS文本属性中，文本对齐属性的取值有( )A. autotext-align: 属性有 B C D Ecss中怎么让div里面的文字底部对齐两种办法，第一种可以作为默认选择。两种办法都可以让文字底部对齐。可以用“text-align:right;”让文字...

收起
css控制文本的竖直方向对齐方式
2022-01-01 10:19:33

使用vertical-align可以设置文本的排版示例 <p>一个<img src="/images/compatible_chrome.gif" alt="w3cschool" width="50" height="50" />默认对齐的图像。</p> <p>一个<img class=...

收起

webview
CSS实现让同一行文字和输入框对齐的方法
2020-09-25 00:43:20

主要为大家介绍了CSS实现让同一行文字和输入框对齐的方法,涉及css中vertical-align属性的使用技巧,需要的朋友可以参考下

收起
一篇文章带你了解CSS对齐方式
2020-11-03 22:08:23

1. 居中对齐元素将块元素水平居中对齐(像 <div>) , 使用 margin: auto; 设置元素的宽度将阻止它伸展到容器的边缘。然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：这个div是居中的。 .center ...

收起
CSS图片和文字的对齐方式
2022-01-14 08:58:37

行内元素有效：vertical-align，块级元素无效 // 垂直居中 vertical-align: middle; // 底部 vertical-align: text-bottom; // 顶部 vertical-align: text-top; ...如果相对块级元素有用，同时还要需要添加 ...

收起
CSS表单对齐方式
2021-08-13 12:54:05

输入用户名：输入密码：重复输入密码：输入邮箱：输入手机：注册显示效果：首先需要给所有的标签增加width属性，给定一个宽度如“width:120px”，使得所有的实现对齐：（1）实现标签里文字的两边对齐方式，...

收起
css控制字间距和对齐方式及其所用属性介绍
2020-12-07 09:55:32

left：左对齐 right：右对齐 center：居中 justify：两端对齐，均匀分布 list-style-type： none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 ...

收起
CSS实现同一行的图片和文字垂直居中对齐的方法
2020-09-25 01:19:20

主要为大家介绍了CSS实现同一行的图片和文字垂直居中对齐的方法,涉及css中vertical-align:middle属性的使用技巧,需要的朋友可以参考下

收起
css对齐方式
千次阅读 2019-07-24 11:22:25

1、被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center /left/right 来实现的。 button、input、select、textarea、img、progress、 2、当被设置元素为块状元素时用 text-align：...

收起
css文本水平对齐方式
千次阅读 2018-12-13 15:47:21

baseline 默认 sub 下标，和<sub>标签一样的效果 super上标，和<sup&...text-bottom 文字对齐 <!DOCTYPE html> <html> <hea...

收起
css分散对齐
2022-05-20 00:07:51

在开发过程中一般会遇到表单之类的东西但是表单的提示文字一般要对齐（如下图）使用text-align-last:justify; width: 200px; border: 1px solid red; text-align-last: justify;

收起
CSS多种方式实现底部对齐的示例代码
2020-12-13 19:22:51

因公司业务要求需要实现如下图中红色区域的效果：效果说明： 1、红色区域数据需要倒排（即从底部开始数，数字为1、2、3、4、5），并且显示在最底部 2、当数据过多时需要显示滚动条，**并且滚动条需要拉到最底部**...

收起
CSS实现文字两端对齐的方法是什么
2021-08-05 03:54:27

CSS实现文字两端对齐的方法是什么发布时间：2020-08-31 14:13:18来源：亿速云阅读：76作者：小新小编给大家分享一下CSS实现文字两端对齐的方法是什么，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！...

收起
CSS图标文字对齐和表单输入框文字对齐兼容
2021-08-04 04:22:52

一般来说，我处理图标如果临近的话都会使用同样宽高，...1.图标和文字对齐一般的图标和文字对齐html代码：霍者网页设计删除霍者网页设计博客CSS代码：p{line-height:20px;font-size:14px;}.icon{display:inline-bl...

收起
CSS实现表单文字对齐方式
千次阅读 2019-10-20 18:02:22

label文字对齐方式表单的对齐方式分为三种 1、左对齐（默认对齐方式，一般不需要） <form action="javascript:void(0)" method="post"> <div> <label>用户名：</label> <...

收起
CSS如何对齐文本框和其旁边的图像按钮比如搜索框等等
2020-12-13 11:55:40

一个文本框旁边一个按钮是很经常用到的网页内容，比如搜索框等等，而如果旁边的按钮使用图像的话，他们竖直方向就很不容易对齐，即使使用 vertical-align、padding和margin等都不行（特别是在IE中，Firefox中使用...

收起
CSS 文字内容底部对齐
千次阅读 2021-12-24 09:46:23

效果：主要代码： .item { width: 200px; height: 400px; border: 1px solid sea....css { display: flex; align-items: flex-end; } 完整代码实现 <template> <div class="mark-title-con"> <

收起
css文本对齐属性的取值有什么
2021-06-13 16:12:06

答案：C、D、E 文本对齐属性： text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。CSS文本属性中，文本对齐属性...

收起
css文本的两端对齐和
2020-08-06 23:26:22

1.文本两端对齐； text-align: justify; text-justify: distribute-all-lines; /*ie6-8*/ text-align-last: justify; /* ie9*/ -moz-text-align-last: justify; /*ff*/ -webkit-text-align-last: j

收起
css 对齐方式
2020-10-06 16:32:07

图片垂直对齐（vertical-align）默认: baseline – 一行内文本的下方。 middle – 一行内小写字母的高度的1/2

收起
css文本两端对齐的实现代码
2020-09-22 11:15:36

主要介绍了css文本两端对齐的实现代码,需要的朋友可以参考下

收起
CSS使文本左对齐并同时对齐
2021-08-04 07:57:47

对齐意味着文本在两条边上排列。但是，文本的最后一行仍将位于左侧或右侧。因此...左对齐强>Lorem Ipsum is simply dummy text of the printing and |typesetting industry. Lorem Ipsum has been the industry's...

收起
css 文字两端对齐
千次阅读 2022-01-12 10:27:05

1、需求是这样的：用div+css实现一个表单，要求表单中，输入框前面的label文字都两端对齐,效果如下: 2、先贴出html代码： <div class="item-box"> <span>姓名：</span> <el-input v-model=...

收起

html
CSS如何设置对齐方式？
2021-06-13 10:33:34

在CSS中，我们可以使用各种方法和技术来使对齐项目，例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法，希望对大家有所帮助。1、margin : auto ;此属性用于将块元素水平对齐到中心。...

收起

CSS中文本对齐方式-文本处理案例

多行文本垂直居中

文本对齐方式

文本排版方向

文本从右至左排列

文本溢出控制

多行文字溢出

注意

文本选择颜色

CSS文本对齐

CSS——文字对齐方式

横向对齐

纵向对齐

CSS中的文字对齐问题

css怎么设置文本左对齐

css文本对齐使用哪个属性

css控制文本的竖直方向对齐方式

CSS实现让同一行文字和输入框对齐的方法

一篇文章带你了解CSS对齐方式

CSS图片和文字的对齐方式

CSS表单对齐方式

css控制字间距和对齐方式及其所用属性介绍

CSS实现同一行的图片和文字垂直居中对齐的方法

css对齐方式

css文本水平对齐方式

css分散对齐

CSS多种方式实现底部对齐的示例代码

CSS实现文字两端对齐的方法是什么

CSS图标文字对齐和表单输入框文字对齐兼容

CSS实现表单文字对齐方式

CSS如何对齐文本框和其旁边的图像按钮比如搜索框等等

CSS 文字内容底部对齐

css文本对齐属性的取值有什么

css文本的两端对齐和

css 对齐方式

css文本两端对齐的实现代码

CSS使文本左对齐并同时对齐

css 文字两端对齐

CSS如何设置对齐方式？

css文本对齐方式