2つの画像の間にテキストを配置することができません

Question

Stack Overflow質問CSS centering text between two imagesのテクニックを使用していますが、テキストセンターを作成できません。

私は、このマークアップの中央にテキスト "0の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

これは、それを修正します：

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

はこちらをご覧ください：http://jsfiddle.net/W5jQd/5/

Answer 3

問題は、それがインラインブロックなので、「幅」をサポートしていないという事実によって引き起こされます。次の変更は、トリックを行います：<div id="invoiceCount">0 of 0</div>にHTMLの変更<span id="invoiceCount">0 of 0</span>にし、CSSでこのような#invoiceCountにwidthを追加します。

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

Answer 4

をあなたは#invoiceNav

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

のCSSに以下を追加することができます最初は<span>要素を中心とし、2番目の要素は<div>（画像と同じ高さ）にテキストを中央に配置します。

Answer 5

良い古いクイックハック：

#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に移動しました。

クイックハックは線の高さで、おおよその画像サイズに設定されています。このテクニックは、1行のテキストを作成し、関連する要素のサイズがわかっているときに、安全で安全です。