CSS——文字对齐方式

最新推荐文章于 2025-06-13 16:23:26 发布

ShyuDai

最新推荐文章于 2025-06-13 16:23:26 发布

阅读量2.9w

点赞数 5

CC 4.0 BY-SA版权

分类专栏：前端入门——CSS

本文链接：https://blog.youkuaiyun.com/qq_39228087/article/details/83055506

前端入门——CSS 专栏收录该内容

8 篇文章

订阅专栏

横向对齐

方法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>

展示效果：

在这里插入图片描述