無法在兩個圖像之間居中文本

我在堆棧溢出問題CSS centering text between two images中使用該技術，但無法創建文本中心。無法在兩個圖像之間居中文本

我想文「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; 
}

什麼我做錯了嗎？

來源

2011-07-20 Alex Angas

您的跨度需要是塊元素。將其更改爲[div]或將[display：block]屬性分配給span類。 http://jsfiddle.net/conekt/W5jQd/18/。 –

您正在使用span作爲內聯元素的文本容器。因此，其寬度與其內容所需的寬度相同，將其更改爲p（或更改display以阻止）將允許水平居中。如果要垂直居中，請將line-height設置爲等於圖像的高度，然後設置vertical-align: middle。

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

來源

2011-07-20 07:55:33 detaylor

這將解決這個問題：

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

在這裏看到：http://jsfiddle.net/W5jQd/5/

來源

2011-07-20 07:55:56

的問題是由不支持「寬度」的事實造成的，因爲它是一個內聯塊。以下更改將這樣的伎倆：在HTML變化<span id="invoiceCount">0 of 0</span>到<div id="invoiceCount">0 of 0</div>和CSS添加width到#invoiceCount這樣的：

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

來源

2011-07-20 07:56:12

你可以添加以下的#invoiceNav

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

的CSS第一個居中<span>元素，第二個居中文本垂直<div>（與圖像高度相同）

來源

2011-07-20 07:59:42

好老快速入門：

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

快速入侵是行高，設置爲大約圖像的已知大小。當你在做一行文本並且所涉及的元素的大小是已知的時，這種技術是好的和安全的。

來源

2011-07-20 08:04:38

無法在兩個圖像之間居中文本

回答

相關問題