使用CSS与:: before选择器在文本旁边显示图标-文本未正确对齐

问题描述

这是我的代码的最低版本：

<html>

<head>
    <style>
        div.tip {
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid transparent;
            border-radius: 7px;
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
            display: flex;
            width: 700px;
            text-align: justify;
            min-height: 30px;
        }

        .tip::before {
            content: "";
            background-image: url("https://image.flaticon.com/icons/svg/702/702797.svg");
            background-repeat: no-repeat;
            background-size: 30px;
            width: 30px;
            background-position-y: center;
            padding-right: 30px;
        }
    </style>
</head>

<body>
    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>
</body>

</html>

如果运行该代码段，您将看到文本在水平不同位置对齐，具体取决于文本中的行数。如何解决此问题，使文本始终在图标旁边的同一位置对齐？谢谢！

解决方法

在flex: none中插入.tip::before

<html>

<head>
    <style>
        div.tip {
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid transparent;
            border-radius: 7px;
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
            display: flex;
            width: 700px;
            text-align: justify;
            align-items: center;
            position: relative;
            margin: auto;
        }

        .tip::before {
            content: "";
            background-image: url("https://image.flaticon.com/icons/svg/702/702797.svg");
            background-repeat: no-repeat;
            background-size: 30px;
            width: 30px;
            min-height: 35px;
            background-position-y: center;
            padding-right: 30px;
            flex: none;
        }
        .tip hr {
            width: 30px;
            height: 0;
            transform: rotate(90deg);
            position: absolute;
            margin: 0;
            box-sizing: border-box;
            border: 1px solid black;
            left: 35px;
        } 
    </style>
</head>

<body>
    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>

    <div class="tip">
        <hr>
        <span><b>Tip</b>: Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</span>
    </div>
</body>

</html>

html

使用CSS与:: before选择器在文本旁边显示图标-文本未正确对齐

问题描述

解决方法

相关问答