css - 对齐文本而不包括其他内容

Question

我有一个 div:

<div>
   MyTitle
   <img style="vertical-align:middle; float:right;padding-right:10px; padding-top:6px;" src="/images/image.png">
</div>

我想在不考虑图像大小的情况下将文本“MyTitle”居中，因为现在正在考虑它。如何忽略图像以保持标题居中并保持此 html 结构？

Answer 1

下面介绍了如何在不考虑图像宽度/高度的情况下将文本居中放置在 div 中。 最佳做法是将您的样式添加到外部样式表中，如下所示。

div {
    text-align:center /* Center the text */
}
img {
    vertical-align:middle;
    float:right;
    padding-right:10px;
    padding-top:6px;

    position:absolute;right:0;top:0; /* This will exclude the image from being counted in size for the parent(div) */
    z-index:-1; /* This lets the text to be over the image if necessary */
}

<div>MyTitle
    <img src="/images/image.png" alt="My Image" />
</div>