CSS常用的几种水平居中的方式

最新推荐文章于 2024-06-18 19:41:46 发布

iris@前端

最新推荐文章于 2024-06-18 19:41:46 发布

阅读量582

点赞数

分类专栏： CSS和html 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/m0_47342482/article/details/111239740

版权

CSS和html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS常用的几种水平居中的方式

html布局最常见的就是水平居中对齐，文字在div里面居中，div在div里面居中，图片在div里面居中等等，今天给大家总结几个CSS中最常见的几种水平居中的方式，绝对好用！

文字在div里面水平居中

html部分

<!DOCTYPE html>
<html>

<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>设备管理</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="content">
        <div class="box">我是div里面的文字</div>
    </div>
</body>

</html>

CSS部分-利用text-align:center属性

.box{
        background: yellow;
        width: 200px;
        height: 100px;
        line-height: 100px;/*让黄色div中的文字内容垂直居中*/
        text-align: center;/*让文字水平居中*/
        position: absolute;    
    }

实现的效果如下图文字在在这里插入图片描述

div在div里面水平居中

1.通过属性margin:0 auto;需注意要设置内层div的宽度。
2.通过flex布局实现：在外层div上设置：

display:flex;
justify-context:center;/*让div在div里面水平居中，该方法在块级元素和行内元素的水平居中效果上都适用*/
align-items:center;/*让div在div里面垂直居中，该方法同样适用于行内元素的垂直居中*/

图片在div里面水平居中

水平居中在图片的父元素中用text-algin:center;进行水平居中
html部分

 <div class="wrap">
	    <img src="../assets/img/manage/notice.png" alt="">
       </div>

CSS部分

.wrap{ width: 600px;
       height: 400px; 
       border: 1px #000 solid; 
       text-algin:center
      }

上面介绍了几种最常见，最简单的方式，希望对大家有所帮助！

iris@前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS常用的几种水平居中的方式

CSS常用的几种水平居中的方式html布局最常见的就是水平居中对齐，文字在div里面居中，div在div里面居中，图片在div里面居中等等，今天给大家总结几个CSS钟最常见的几种水平居中的方式，绝对好用！文字在div里面水平居中html部分<!DOCTYPE html><html><head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
复制链接

扫一扫

专栏目录