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

回答

相关问题