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

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>

Answer 2

这是一个解决方案

<div class="container">
    <p>MyTitle</p>
    <img src="/images/image.png" />
</div>

要应用的CSS

.container p {
    text-align:center;
}
.container img {
    float:right;
    padding: 6px 10px 0 0;
}