块、行内元素水平，垂直居中

u014378108

已于 2023-12-28 09:19:44 修改

阅读量304

点赞数 9

分类专栏： html css 文章标签：前端 html css

于 2023-12-13 11:32:50 首次发布

本文链接：https://blog.csdn.net/u014378108/article/details/134967093

版权

css 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

块元素--margin方法：

水平：margin:0 auto

垂直：marign-top: ( 父元素高度-子元素高度）/2 px 可能会出现margin-top塌陷问题，

需要父元素添加overflow:hidden,或padd>0 或border>0

对于行内元素或块元素

水平：在父元素添加text-align:center,

垂直：父元素添加line-height=height ,每个元素加上vertical-align:middle

如果要绝对居中，设置父元素的font-size:0,再设置子元素的font-size大小

<style>
    .outer{
        width:400px;
        height: 400px;
        background: lightpink;
        overflow: hidden;/*解决margin-top坍塌问题*/
    }
    .inner{
        width:300px;
        height: 80px;
        background: orange;
        margin:0 auto; /*水平剧中*/
        margin-top:180px;/* （父元素高度-子元素高度）/2    由于是第一个子元素的margin-top,所以marign-top会作用在父元素上，因此要在父元素加上overflow*/
        
font-size: 18px;
 /* 行内元素垂直对齐 */
        text-align: center;
        line-height: 80px;
/* end 行内元素垂直对齐 */
       

        font-size:0; /* 设置子元素绝对垂直剧中，子元素vertical-align:middle;子文本元素重新设置font-size */

   }


   .image,.word{
    vertical-align: middle;
   }
   .word{font-size:14px;}

</style>
<body>
    
    <div class="outer">
        <div class="inner">
<!-- 文本x -->
<span class="word">xx</span>
<img src="./7048.png" class="image">
        </div>
    </div>
</body>

图片替换成正方形，border-radius:50%,可以做下面的效果

u014378108

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
块、行内元素水平，垂直居中

垂直：marign-top: ( 父元素高度-子元素高度）/2 px 可能会出现margin-top塌陷问题，需要父元素添加overflow:hidden,或padd>0 或border>0。垂直：父元素添加line-height=height ,每个元素加上vertical-align:middle。如果要绝对居中，设置父元素的font-size:0,再设置子元素的font-size:0。水平：在父元素添加text-align:center,对于行内元素或块元素。
复制链接

扫一扫