图像和文本环绕之前的伪造

Question

p.note:before {
    content: "";
    width: 30px;
    height: 50px;
    float: left;
    margin: 0 6px 0 0;
    background: url(../images/note-icon.png) no-repeat;
}

.note {
    font-family:  arial, sans-serif !important; 
    background-color: transparent !important;
    border: 1px solid #6F1425 !important;
}

您好，

我试图在文本正文之前强制执行 ::before 伪元素（记事本图像）的垂直高度。但是，较长的文本会环绕在图像下方，我想防止这种情况发生。但是，尝试包含绝对高度会将 past/below 元素扩展到其他内容中。

在文本之前将图像垂直居中是一个可以接受的替代方案。

减少以下示例的查看 window（强制换行和额外的文本行）以了解我的意思。谢谢

https://codepen.io/psuedobeforehelp/pen/YzGKVOB

Answer 1

你可以这样做。在 before 元素中，您只需要输入此代码

position:absolute;
left:20px;
top:50%;   // THIS LINE OF CODE HERE CENTERS THE IMAGE 
transform:translateY(-50%); // THIS LINE OF CODE HERE CENTERS THE IMAGE

并将 position:relative; 添加到您的 note class 以防止 before 元素移动到某个地方。

p.note:before {
    content: "";
    width: 30px;
    height: 50px;
    margin: 0 6px 0 0;
    position: absolute;
    background: red;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}


.note {
    font-family:  arial, sans-serif !important; 
    background-color: transparent !important;
    border: 1px solid #6F1425 !important;
    position:relative;
    padding:20px 20px 20px 50px;
}

<p class="note"><span class="bold">Note</span>: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>

图像和文本环绕之前的伪造

Psuedo Before Image and Text Wrapping

css

position

word-wrap

text-alignment