div中的元素水平居中对齐

曾经终败给现在 2023-10-14 20:25 61阅读 0赞

![cffe6153b376432baeceac9e1b9650e6.png][]![b53c9cd02ee8454b9f019827e68624f4.png][]

<div>
        <img src="imgs/xy.jpg" alt="">
        <h2>百变小樱</h2>
    </div>
    <style>
        * {
        
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        div {
        
            width: 200px;
            height: 300px;
            margin: 20em auto;
            padding-top: 4em;
            border: 2px solid rgb(69, 82, 93);
            text-align: center;
            background-color: aliceblue;
            box-shadow: 2px 3px 8px 1px rgb(161, 174, 186);
        }
        div:hover {
        
            background-color: rgb(249, 252, 255);
            box-shadow: 2px 3px 8px 1px rgb(183, 193, 202);
        }
        img {
        
            display: inline-block;
            height: 100px;
            border: 3px solid black;
            border-radius: 50%;
        }
        h2 {
        
            display: inline-block;
            line-height: 100px;
            font-family: 幼圆;
        }
    </style>

**说明：**

*  需要将父 div 加上 text-align: center;，然后给子级都设为  display: inline-block;
 *  box-sizing: border-box; 是为了减去可能出现的 margin、padding 而多出的盒子尺寸

[cffe6153b376432baeceac9e1b9650e6.png]: https://img-blog.csdnimg.cn/cffe6153b376432baeceac9e1b9650e6.png
[b53c9cd02ee8454b9f019827e68624f4.png]: https://img-blog.csdnimg.cn/b53c9cd02ee8454b9f019827e68624f4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 div中的元素水平居中对齐

![cffe6153b376432baeceac9e1b9650e6.png][]![b53c9cd02ee8454b9f019827e68624f4.png][]

曾经终败给现在/ 2023年10月14日 20:25/ 0 赞/ 62 阅读

相关 div 水平垂直居中

<div class="parent"> <div class="child"></div> </div> 1、 div.pare

小鱼儿/ 2023年10月12日 08:11/ 0 赞/ 45 阅读

相关 DIVs水平垂直居中

.login-container { height: 260px; margin: 0 auto; /水平居中/ margin-top:

迈不过友情╰/ 2023年07月07日 03:37/ 0 赞/ 40 阅读

相关 div垂直水平居中

第一种方法：flex布局 <style> .parent { width: 200px; height:

墨蓝/ 2023年06月05日 11:19/ 0 赞/ 34 阅读

相关 div通过flex布局实现div里面的元素水平垂直居中

> `div通过flex布局实现div里面的元素水平垂直居中` <div class="flex"> <div> <p>p标

灰太狼/ 2023年01月21日 04:24/ 0 赞/ 24 阅读

相关 div水平垂直居中

一、水平居中： 1、div盒子水平居中：比较容易，直接设置div元素的margin: 0 auto就可以实现。 2、div里面的内容水平居中：text-align:cent

朴灿烈づ我的快乐病毒、/ 2022年12月07日 01:14/ 0 赞/ 308 阅读

相关子div水平垂直居中及 div中label水平垂直居中

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-e

客官°小女子只卖身不卖艺/ 2022年11月06日 15:54/ 0 赞/ 275 阅读

相关 div水平垂直居中

.main\{width:960px;height:658px;position:absolute;top:50%;left:50%;margin-top:-329px;mar

向右看齐/ 2022年08月23日 12:47/ 0 赞/ 334 阅读

相关定宽高的div元素垂直水平居中

![1488621-20190528160226952-1274501532.png][] 关键点在于：采用绝对定位，使元素盒子左顶点位于垂直居中位置，再设置margin-l

ゝ一纸荒年。/ 2021年12月18日 07:47/ 0 赞/ 336 阅读

相关 div块元素垂直水平居中方法总结

1、已知块级元素的宽和高，使用绝对定位+外边距设定水平垂直居中。父元素position:relative，子元素position:absolute;top:50%;le

﹏ヽ暗。殇╰゛Y/ 2021年12月16日 12:39/ 0 赞/ 393 阅读