有关图像对齐的简单css问题

问题描述

| 我要对齐与该页面相似的图像：http://nymanssnickeri.se/ 我的内容div为900px宽。如您所见，图像＃1和＃3位于内容div的边缘。在此页面上，空白仅用于中间的图像。如果没有超过3张图片，我可以在第一张图片上使用第一个孩子选择器，这样就可以解决问题。但是有时会有多行图像。有什么想法如何以一种好的方式实现这一目标吗？谢谢     

解决方法

您可以给每个图像相等的水平边距，然后在第一个和最后一个上添加一个类，分别具有

margin-left: 0

和

margin-right:0

。您必须花一点时间来调整边距大小/数学。 例：

#container img { margin: 0 20px; }
#container img.first {margin-left: 0; }
#container img.last {margin-right: 0; }

20px只是我选择的一个随机数。这取决于您的图像尺寸以及您拥有的图像数量。 编辑： 数学的利润（检查一下，只是在飞行中弥补）： （容器总宽度-所有图像的总宽度）/（图像总数-1）* 2     ,如果您希望每行拥有三张图像，而不必担心设置像素边距来达到这种效果，则可以执行以下操作... 演示：http：//jsfiddle.net/ENQTZ/1/

<div>
    <span class=\"a\"></span>
    <span class=\"b\"></span>
    <span class=\"c\"></span>
</div>
<div>
     <span class=\"a\"></span>
     <span class=\"b\"></span>
     <span class=\"c\"></span>
 </div>

div {
    text-align: center;
    margin-bottom: 20px;
}
span {
    display: block;
    width: 32%;
    height: 100px;
    background-color: red;
}
.a {
    float: left;
}
.b {
    float: right;
}
.c {

     margin-left: auto;
     margin-right: auto;
     position: relative;
     left: 0px;
     top: 0px;
}

    ,如果提前知道布局，包括照片数量等，则可以使用表格：

<table width=\"900\"><tr><td><img /></td><td><img /></td>
<td><img /></td></tr></table>

或者，您可以使用div并将它们连接起来以创建多个行：

<style
div#img-container { width: 900px; }
div#img-container img { display: block; }
img.lft { float: left; }
img.mid { margin: 0 auto; }
img.rgt { float: right; }
</style>
<div id=\"img-container\">
<img class=\"lft\"/>
<img class=\"mid\"/>
<img class=\"rgt\"/>
<br />
</div>

您可能需要将图像上的边距，内边距和边框重置为0才能使用此方法，否则图像会稍微溢出并且无法正确对齐。     ,

<center> 
<div ID=\"Content\" Style=\"Width:900px\"> 
  <center>
     <table>
        <tr>
           <td>
              Your image here
           <td>
           <td>
              Your image here
           <td>
        </tr>
        <tr>
           <td>
              Your image here
           <td>
           <td>
              Your image here
           <td>
        </tr>
     </table>
  </center>
</Div>
</center>

这对您有用吗？这是我使用的模板。只需为更多的单元格添加更多的td标签，为更多的图像行添加更多的tr标签。 此外，您可以将图像样式设置为所需的确切大小，但请注意，可能会发生拉伸/挤压

<img ID=\"Image\" src=\"Image/Cat.png\" alt=\"Cat.png\" style=\"Width:50px;Height:50px\" />