如何在HTML中使用 CSS使文本对齐

发布时间：2023-10-14 09:43:23 所属栏目：语言来源：

导读：在实际应用中，我们有时候会遇到“CSS中让文字居中可以怎样做，代码如何写”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“CSS中让文字居中可以怎样做，代码如何写”文

在实际应用中，我们有时候会遇到“CSS中让文字居中可以怎样做，代码如何写”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“CSS中让文字居中可以怎样做，代码如何写”文章能帮助大家解决问题。

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.txt1{
font-size: 30px;
text-align: center;
}
span{
text-align: center;
}
.txt2{
text-align: right;
}
</style>
</head>
<body>
这是内容1
这是内容2
这是内容3

</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: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top: -150px;
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!