CSS圖像對齊

我有3個圖像放在一個ul的三個li元素中。我希望這些圖像在中心對齊。所以，我刪除了ul的邊距和填充以及li元素的填充。然後，這些李元素分別被賦予了30％的寬度。這讓我剩下10％的空間，因爲整個ul是100％。然後將利潤率和利潤率分別設爲1.66％（（100-90）/ 6）。這並沒有對齊這些圖像的中心。請建議一種方式，讓李的第一個孩子和最後一個孩子的利潤率相同。CSS圖像對齊

這是代碼。

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
<ul> 
<li><img src="test.jpg"></li> 
<li><img src="test.jpg"></li> 
<li><img src="test.jpg"></li> 
</ul> 
</body> 
</html> 

body { 
margin: 0; 
padding: 0; 
} 

ul { 
list-style: none; 
padding: 0; 
margin: 0; 
width: 100% 
} 

li { 
display: inline-block; 
width: 100%; 
overflow: hidden; 
margin-left: 1.66%; 
margin-right: 1.66%; 
}

來源

2013-10-28 user2927281

爲什麼不直接使用'的text-align：center'？ – David

你能告訴我它的工作嗎？ – user2927281

理論上，您不需要使用邊距。只需將'text-align：center'添加到'li'元素中即可。順便說一下，你的li元素目前有100％的寬度，這也可能會導致一些問題。 – David

使用float:left;而不是display: inline-block;因爲它擁有默認情況下，4個像素保證金，但如果你仍然想使用inline-block的，然後你也可以用font-size: 0;因爲這是ul

你的父母DIV而另一件事情，如你在你的問題中提到，在你的代碼中沒有30％的寬度li定義它30%;

來源

2013-10-28 08:36:19

對不起，我沒有寫在這裏。它在原始代碼中。 – user2927281

你也可以ta利用CSS3的第n個子選項並設置左右列圖像的邊距/填充。所以你只能將屬性設置爲第一個元素和第三個元素。

在這裏，你可以找到更多關於第n個孩子http://css-tricks.com/how-nth-child-works/或http://reference.sitepoint.com/css/pseudoclass-nthchild的更簡潔明瞭的信息。

祝你好運！

來源

2013-10-28 08:45:18 watt

我可以建議一種替代方法。使用表格可以減輕使用在線模塊造成的大量麻煩。

代碼：

<html> 
<head> 
<style type="text/css"> 
body { 
margin: 0; 
padding: 0; 
} 

table, table img 
{ 
    width:100%; 
} 
</style> 
</head> 
<body> 
<table cellpadding="2%"> 
    <tr> 
     <td align="center"><img src="test.jpg"></td> 
     <td align="center"><img src="test.jpg"></td> 
     <td align="center"><img src="test.jpg"></td> 
    </tr> 
</table> 
</body> 
</html>

通過使用表，可以只通過使用<table>元件的cellpadding內嵌屬性改變每個小區之間的距離，並且可以通過改變改變在單元中的內容的排列<td>元素的align屬性。

其結果是：

Result

3均勻間隔的圖像佔用的瀏覽器窗口（或任何容器它們被放置在）的全尺寸。

例如在500像素寬的容器（黑色邊框表示容器）：

Result #2

來源

2013-10-28 08:49:19 David

回答

相關問題