居中動態大小的圖像

我正在使用PHP腳本按比例自動調整圖片大小，以適合給定的高度和寬度（例如：原始圖片爲200x100px，目標框爲180x180px，調整大小的圖片爲180x90px）。居中動態大小的圖像

它工作正常，但通常的CSS技巧用於居中在一個div裏面的圖像似乎要求你事先知道尺寸。

我發現的唯一解決方法是將外部div定義爲display:table;，將包含圖像的div定義爲display: table-cell;vertical-align: middle;text-align:center;。

還有別的辦法嗎？

來源

2012-07-22 James P.

難道你不能把你的PHP腳本透明顏色來獲得180x180px圖像？ – 2012-07-22 01:39:56

我認爲唯一能夠保證垂直居中的方法是使用JavaScript - 在您的情況下可以接受嗎？ – Hubro 2012-07-22 01:41:02

如果您想使用您提到的方法而不是表格單元技巧，則可以使用Javascript來獲取圖片的尺寸並設置其樣式，或者返回到您的瀏覽器自定義樣式規則PHP腳本。 – 2012-07-22 01:43:15

不是最佳實踐文本對齊圖像對齊。

「關於text-align屬性棘手的事情是，你只能用它對齊文本 - 你不能用它來移動塊級元素，如圖像有些瀏覽器將調整圖片或表格與此有關。財產，但它不可靠，就像你找到的那樣。「 - Jennifer Kyrnin, About.com

您可以使用已棄用的IMG的屬性ALIGN = 「中心」，雖然你不會用。這種方式使得標籤和樣式變得混雜，並且惡化，整個圖像周圍有垂直和水平的空間。
```
<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way 
```
解決此問題的最佳方法是使用css。將圖片設置爲div的背景，那麼div的空間將成爲您圖片的空間，您可以使用邊距將其放置到位。您可以嘗試使用這些其他方法之一CSS Tricks's Absolute center an image

CSS背景圖像技術：

background:url('path_to_img') center center no-repeat; /* div center */ 
background:url('path_to_img') center 0  no-repeat; /* div horizontal center */ 
background:url('path_to_img') 0  center no-repeat; /* div vertical center */

來源

2012-07-22 01:43:22

如果您需要使用img標籤，而不想惹背景的div圖像，你可以試試這個方法：

http://jsfiddle.net/Nz6Nm/3/

.container 
{ 
    width: 180px; 
    height: 180px; 
    background-color: #FF0000; 
    line-height: 180px; 
    font-size: 0; 
    text-align: center; 
} 
.container img { 
    vertical-align: middle; 
}

字體大小設置爲0以避免奇怪的間距。線高等於您容器的高度，會導致垂直對齊作爲垂直中心工作，至少對於圖像而言。

這樣做的好處是，你將能夠把你的圖像放在img標籤中，這比背景圖像更符合語義。此方法適用於已知容器大小的情況，但是您希望在其中居中的未知圖像大小。

編輯：這裏的另一個小提琴的鏈接：http://jsfiddle.net/Nz6Nm/4/

你提到可能需要把文本的圖像上，所以我只是想這樣做表現出它的快捷方式。這種方式將20px添加到頂部。如果你需要堅持180 x 180，那麼你可以調整邏輯來適應。

來源

2012-07-22 02:01:11

居中動態大小的圖像

回答

相關問題