CSS：使用文本對齊：跨度中心

對於日曆應用程序，我希望熟悉的月份名稱以左邊的左箭頭爲中心回到一個月，右邊的箭頭在右邊保證金一個月前進。像在年底< May >CSS：使用文本對齊：跨度中心

<Div>的Insert換行符的東西，所以我想，除了跨度是一個內聯元素，使得text-align: center財產只有一個月的長度內對準它，我會用跨度。剛開始使用text-align: center產生類似<May >

爲了彌補這一點，我在跨度增加display: block，不過，這會在最後一個換行符即

<  May 
       >

任何人都可以提出一個正確的方式做這個？

最新版本：

CSS/HTML：

span.previous { 
 
    float:left; 
 
} 
 
span.next { 
 
    float:right;  
 
} 
 
span.month { 
 
    display:block; 
 
    text-align:center; 
 
}

<span class="previous"><img src="leftarrow.gif"></span> 
 
<span class = "month">May</span> 
 
<span class="next"><img src="rightarrow.gif"></span>

來源

2013-05-13 user1904273

爲什麼你需要'顯示：塊;'當你想直列排列的一切嗎？ – 2013-05-13 11:18:12

，因爲否則文本對齊不起作用..中型示例 – user1904273 2013-05-13 11:27:24

可能的重複[如何居中元素在CSS？]（https://stackoverflow.com/questions/15324452/how-to-center-a-span -element-in-css） – 2017-06-08 21:25:52

您需要將文本對齊到容器元素，並刪除display:block（文本對齊使用內聯/內聯塊元素）。不要忘記清除容器後的浮標。

fiddle

來源

2013-05-13 11:17:22

這就夠了，爲什麼要使用浮動和清除以及所有的東西http://jsfiddle.net/C3Wxf/ – 2013-05-13 11:19:34

它看起來像OP想要一個完整的寬度佈局，邊緣上有箭頭東西[像這樣]（http://jsfiddle.net/kkJ8e/1/） – 2013-05-13 11:21:33

這工作。我想對我原來的問題的答案是，你只能在一個div中對文本進行文本對齊......你不能在一個範圍內做到這一點。僅供參考，我嘗試使用內聯塊並添加一個寬度，但這並沒有居中。 – user1904273 2013-05-13 11:50:37

一家以設計日曆頭的方式可能是以下。在我的示例（this fiddle）中，我使用了星號而不是圖片。我替換了段落的月份範圍，並更改了標記的順序。

以靈活的設計，星號或圖像將保留在中間的兩側和中間的月份。看到這個fiddle。

#header { 
 
    background:#e0e0e0; 
 
} 
 
span.previous { 
 
    float:left; 
 
} 
 
span.next { 
 
    float:right;  
 
} 
 
p.month { 
 
    text-align:center; 
 
}

<div id="header"> 
 
    <span class="previous">**</span> 
 
    <span class="next">**</span> 
 
    <p class = "month">May</p> 
 
</div>

來源

2013-05-13 11:41:10 Fico

CSS：使用文本對齊：跨度中心

回答

相關問題