span 标签设置高度和宽度，且高度和水平都居中

原因：

要使内联元素可以设置宽高，只需将其定义为块级或者内联块级元素即可

代码：

span {
    height: 100%;
    float: left;
　　 /*块级元素*/
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;
}

 

效果图：

 示例：

<html>
<head>
    <title>测试</title>
    <style>

        body {
            background-color: #d5d5d5;
        }

        .content {
            width: 20%;
            height: 100%;
            margin: auto;
        }

        .content span {
            height: 100%;
            float: left;
            /*******重点*******/
            display: flex;
            /*水平居中*/
            justify-content: center;
            /*垂直居中*/
            align-items: center;
        }

        .content span:first-child {
            width: 10%;
        }

        .content span:nth-child(2) {
            width: 10%;
        }

        .content span:nth-child(3) {
            width: 60%;
        }

        .content span:nth-child(4) {
            width: 10%;
        }

        .content span:last-child {
            width: 10%;
        }

        .content span:first-child div {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #C62B2D;
        }

        .content span:nth-child(2) div {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #C62B2D;
        }

        .content span:nth-child(3) div {
            text-align: center;
            font-size: 25px;
            color: #C62B2D;
        }

        .content span:nth-child(4) div {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #C62B2D;
        }

        .content span:last-child div {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #C62B2D;
        }
    </style>
</head>
<body>
    <div class="content">
        <span><div></div></span>
        <span><div></div></span>
        <span><div>hello word</div></span>
        <span><div></div></span>
        <span><div></div></span>
    </div>
</body>
</html>

 

posted @ 2022-05-18 09:13  卡农的忧伤ろ◆  阅读(608)  评论(0)    收藏  举报