css水平居中问题

最新推荐文章于 2024-06-03 18:53:48 发布

程序员锋锋

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量224

点赞数

分类专栏：前端文章标签：水平居中

本文链接：https://blog.csdn.net/weixin_42322521/article/details/88644042

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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>```

程序员锋锋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css水平居中问题

1、水平居中问题1.1文字的水平居中问题语法：text-align:center;举例：div{ width: 400px; height: 60px; line-height: 60px; text-align: center; /*实现文字水平居中*/ border: 1px solid red; } ...
复制链接

扫一扫