縱橫對齊文本在可變大小

Question

的形象我不是一個CSS忍者，沒有你們的天才的解決方案，我需要編造一些服務器端解決方案，這就是問題所在：

• 我有一個形象。圖像的大小是可變的。它可以是250x380 或640x480或任何其他。
• 我必須在圖片的中心放置一些文字。它必須是水平和垂直對齊的 。
• 我需要一個HTML + CSS解決方案......以及無論在客戶端工作。

Answer 1

這裏是做什麼你問一個方式，使用HTML，CSS和JavaScript：

1. 把你的圖像的屬性要的標籤，比如alt財產
2. 編寫創建一個div元素標籤，並把它放在圖像的頂部
3. 運行上的所有圖像功能，您想對的

頂部的標籤功能0

下面是一個示例：http://jsfiddle.net/Codemonkey/YnMfM/2/

我的示例需要使用JavaScript，但使用的jQuery庫不是強制性的。您可以使用純JavaScript或任何其他庫

Answer 2

以下是一種只使用HTML和CSS來完成問題的方法。它比我的其他解決方案更骯髒，但它反正很酷。

1. 把圖像內的div與position: relative
2. 將一個div一個table內div內同一div內的圖像
3. 舒展div跨使用包裝的圖像下面position: absolute
4. 將表格設置爲100％的寬度和高度，並將其文本對齊並將其垂直對齊到中間
5. 顯示div表作爲inline-block和風格這裏面，你想

下面是一個例子：http://jsfiddle.net/Codemonkey/a52qx/1/

我不能保證瀏覽器的兼容性。我敢打賭，Internet Explorer將會投入配合，但我無法測試，因爲我在Ubuntu機器上。

Answer 3

來自Codemonkey/Hubro的僅HTML/CSS解決方案能夠工作，但您實際上並不需要使用表格。您可以將相關的div設置爲display:table和display:table-cell。

這裏是他的榜樣，而不表：

https://jsfiddle.net/aphidesign/cwosvp9b/