CSS 父Div开启弹性合之后，子元素table-cell居中实现不了。

Lan.W

已于 2023-03-22 12:10:52 修改

阅读量186

点赞数

文章标签： css html javascript

于 2023-03-22 11:36:11 首次发布

本文链接：https://blog.csdn.net/LlanyW/article/details/129706128

版权

问题：

如下图第一个图标父div开启flex，用table-cell：

display: table-cell;
vertical-align: middle;
text-align: center;

不能居中，但是第二个图标能居中。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: calc(100vw / 414)
        }

        .outer {
            display: flex;
            flex-direction: column;
            /*居中:侧轴*/
            align-items: center;
            position: relative;
        }

        .cate-icon {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            /*line-height: 50rem;*/
            width: 100rem;
            height: 100rem;
            border-radius: 50%;
            border: 1px solid red;
            background-color: #c7edcc;
        }

         
    </style>
</head>
<body>
<div class="outer">
    <span class="cate-icon">
    <img src="imgs/Vector2x.png" alt="">
</span>
</div>
<span class="cate-icon">
    <img src="imgs/Vector2x.png" alt="">
</span>
 
</body>
</html>

解决：

目前，开启了父flex的子元素内部，只能先用flex居中方式实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: calc(100vw / 414)
        }

        .outer {
            display: flex;
            flex-direction: column;
            /*居中:侧轴*/
            align-items: center;
            position: relative;
        }

        .cate-icon {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            /*line-height: 50rem;*/
            width: 100rem;
            height: 100rem;
            border-radius: 50%;
            border: 1px solid red;
            background-color: #c7edcc;
        }

        
        .cate-icon3 {
            /*background-image: url("imgs/Ellipse10.png");*/
            /*background-repeat: no-repeat;*/
            /*background-size: cover;*/
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto 0;
            /*图片与文字对齐实现*/
            vertical-align: middle;

            /*display: table-cell;
            vertical-align: middle;
            text-align: center;*/

            /*line-height: 50rem;*/
            width: 100rem;
            height: 100rem;
            border-radius: 50%;
            border: 1px solid red;
            background-color: #c7edcc;
        }
    </style>
</head>
<body>
<div class="outer">
    <span class="cate-icon">
    <img src="imgs/Vector2x.png" alt="">
</span>

    <span class="cate-icon3">
    <img src="imgs/Vector2x.png" alt="">
</span>
</div>
<span class="cate-icon">
    <img src="imgs/Vector2x.png" alt="">
</span>

 
</body>
</html>

效果：第二个蔬菜在父开启flex，用flex居中方式是可以实现。

Lan.W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 父Div开启弹性合之后，子元素table-cell居中实现不了。

目前，开启了父flex的子元素内部，只能先用flex居中方式实现。效果：第一个蔬菜在父开启flex，用flex居中方式是可以实现。不能居中，但是第二个图标能居中。
复制链接

扫一扫