无法在两个图像之间居中文本答案

【问题标题】：Unable to center text between two images无法在两个图像之间居中文本
【发布时间】：2011-07-21 08:42:17
【问题描述】：

我正在使用 Stack Overflow 问题 CSS centering text between two images 中的技术，但无法使文本居中。

我希望在此标记 (as a fiddle) 中居中显示文本“0 of 0”：

HTML：

<div id="invoiceImageContainer">
    <img src="http://i.imgur.com/8QT8u.png" id="invoiceImage">
    <div id="invoiceNav">
        <img title="Next" src="http://i.imgur.com/oZb7r.png" id="nextInvoice">
        <img title="Previous" src="http://i.imgur.com/aKi11.png" id="prevInvoice">
        <span id="invoiceCount">0 of 0</span>
    </div>
</div>

CSS：

#invoiceImageContainer{
    width:420px;
    margin: 0 auto;
}
#invoiceImage {
    height:600px;
}
#invoiceNav {
    color:black;
    font-size:10pt;
}
#prevInvoice {
    float:left;
    padding-left:100px;
}
#nextInvoice {
    float:right;
    padding-right:100px;
}
#invoiceCount {
    text-align:center;
}

我做错了什么？

【问题讨论】：

你的 span 需要是一个块元素。将其更改为 [div] 或将 [display: block] 属性分配给 span 类。 jsfiddle.net/conekt/W5jQd/18.

标签： css

【解决方案1】：

您正在为作为内联元素的文本容器使用span。因此它的宽度与其内容所需的宽度相同，将其更改为p（或将display 更改为块）将允许水平居中。如果要垂直居中，则将line-height 设置为图像的高度并设置vertical-align: middle。

更新小提琴：http://jsfiddle.net/W5jQd/3/.

【讨论】：

【解决方案2】：

好旧的快速破解：

#invoiceImageContainer{
    width:420px;
    margin: 0 auto;
}
#invoiceImage {
    height:600px;
}
#invoiceNav {
    color:black;
    font-size:10pt;
    text-align:center;
}
#prevInvoice {
    float:left;
    padding-left:100px;
}
#nextInvoice {
    float:right;
    padding-right:100px;
}
#invoiceCount
{
    line-height: 35px;
}

在您的原始标记中，您将 #invoiceCount 设置为 text-align:center。这是错误的，因为您无法以这种方式居中跨度，因此我将其移至您的容器 div。

快速破解是行高，设置为大约已知图像的大小。当您处理单行文本并且所涉及的元素的大小已知时，这种技术既好又安全。

【讨论】：

【解决方案3】：

这将解决它：

/* should be block level element */
#invoiceCount{
    display: block;
}

请看这里：http://jsfiddle.net/W5jQd/5/

【讨论】：

【解决方案4】：

您可以在#invoiceNav 的 CSS 中添加以下内容

text-align: center;
line-height: 32px;

第一个将<span> 元素居中，第二个将<div> 中的文本垂直居中（与图像高度相同）

【讨论】：

【解决方案5】：

问题是由不支持“宽度”的事实引起的，因为它是一个内联块。以下更改将解决问题：在 HTML 中将 <span id="invoiceCount">0 of 0</span> 更改为 <div id="invoiceCount">0 of 0</div> 并在 CSS 中将 width 添加到 #invoiceCount，如下所示：

#invoiceCount {
    text-align:center;
    width: 100%;
}

【讨论】：