您的位置：首页 > Web前端 > CSS

css水平居中问题

2019-03-18 17:29 218 查看

1、水平居中问题

1.1文字的水平居中问题

语法：text-align:center;

举例：

div{  width: 400px;
height: 60px;
line-height: 60px;
text-align: center;  /*实现文字水平居中*/
border: 1px solid red;
}
<body>
<div> css实现文字居中: text-align:center; </div>
</body>

运行结果：

1.2元素的水平居中

（1）块元素
在css中，对于块元素，如果给定了长度和宽度，直接定义margin-left和margin-right为auto就可以水平居中。

语法：margin:0 auto;
等价于：margin:0 auto 0 auto ;

只要给块元素宽度这个方法就有效。
如果没有给块元素宽度，则块元素会默认沾满允许的最大宽度值。此时这个方法是无效的。
因此要想使用这个方法来使块元素水平居中就必须给块元素宽度。
举例：

<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
margin: 0 auto;
width: 400px;
height: 60px;
line-height: 60px;
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
css实现块元素居中: margin: 0 auto;
</div>
</body>
</html>```

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航