Question

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

我希望文本“0 of 0”以此标记为中心（as a fiddle）：

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;
}

我做错了什么？

Answer 1

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

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

Answer 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。

快速黑客是行高，设置为大约已知图像的大小。当您执行单行文本并且所涉及的元素的大小已知时，此技术是安全且安全的。

Answer 3

这将解决它：

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

见这里：http://jsfiddle.net/W5jQd/5/

Answer 4

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

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

Answer 5

您可以将以下内容添加到#invoiceNav

的CSS中

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

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

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

5 个答案: