当前位置：九州下载 > 建站问答 >

css设置文字居中的两种方法

时间：2023-02-25 14:10编辑：九州下载来源：www.wzjsgs.com

1、利用text-align属性使文本水平居中。

text-align属性规定了文本在元素中的水平对齐，通过使用center值来设置文本。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.txt1{
font-size:30px;
text-align:center;
}
span{
text-align:center;
}
.txt2{
text-align:right;
}
</style>
</head>
<body>
<p>这是内容1</p>
<p><span>这是内容2</span></p>
<p><span>这是内容3</span></p>
<!--上面用span居中时，无法居中，因此span是行级元素，
行级元素无法设置text-align,若把text-align设置给外面的p即可，
所以自己理解的，若想把行级元素居中，在外面给它套个块级元素。
-->
</body>
</html>

2、line-height属性使文字垂直居中

把 line-height 的高度设置和 height 高度一样就能使文字垂直居中。

html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.content{
width:300px;
height:300px;
background:orange;
margin:0auto;/*水平居中*/
position:relative;
top:50%;/*偏移*/
margin-top:-150px;
}

以上就是css设置文字居中的两种方法，希望对大家有所帮助。更多编程基础知识学习：python学习网

< 上一篇

css中删除input输入框的阴影

下一篇 >

css旋转属性如何理解