如何在浮動div上垂直和水平放置圖像而不知道圖像寬度或高度？

好的瀏覽器不符合要求，它需要在IE 8和Internet上有效; 如何將圖像放在浮動的div上而不知道圖像的寬度或高度？如何在浮動div上垂直和水平放置圖像而不知道圖像寬度或高度？

圖像在語義上是相關的，所以它不能作爲背景; 的HTML：

<div class="logo-organization-home"> 
<img src="images/logoOrganization1.png" alt="logo organization 1"/> 
</div>

而CSS：

.logo-organization-home { 
    float:left; 
    background-color: #fafaed; 
    border: 4px solid #f7f4ee; 
    width: 18%; 
}

我試過顯示：表細胞;沒有成功; 我試過文字對齊與某個填充中心：沒有成功;

失敗嘗試： http://cssdesk.com/pQnRG

感謝

來源

2011-11-16 MEM

有關代碼的妥善解決這裏所說？ – MEM

要居中horizontaly，使用： '文本對齊：中心' 的.logo組織家庭

來源

2011-11-16 17:31:44

如果包含元素的寬度，你可以使用以下內容：

.logo-organization-home img { 
    display:block; 
    margin:0 auto; 
}

來源

2011-11-16 17:34:43 dodger

關於水平居中，你鏈接到這裏的例子：http://cssdesk.com/pQnRG無法正常工作，因爲div的寬度小於圖像的寬度。例如，如果將寬度增加到40％，即使包含的div有填充，您也會看到圖像將正確居中。

關於垂直居中，在IE8上display：table-cell「需要！DOCTYPE。IE9」。 http://www.w3schools.com/cssref/pr_class_display.asp另外，雖然不道德的，你可以直接使用表/行/小區作爲額外的容器：

.logo-organization-home { 
    float:left; 
    background-color: #fafaed; 
    border: 4px solid #f7f4ee; 
    width: 18%; 
} 
table{ 
    width:100%; 
    height:100%; 
} 
td{ 
    vertical-align:center; 
    text-align:center; 
}

和HTML：

<div class="logo-organization-home"> 
    <table><tr><td> 
     <img src="images/logoOrganization1.png" alt="logo organization 1"/> 
    </td></tr></table> 
</div>

來源

2011-11-17 16:44:29

如何在浮動div上垂直和水平放置圖像而不知道圖像寬度或高度？

回答

相關問題