使用相等的空格将3个图像对齐在同一行？

Question

我想在div中的同一行中对齐3个图像，第一个图像应该对齐以完成页面的左边，第三个图像应该对齐以完成页面的右边，第二个图像应该在精确的中心对齐第1张和第3张图片

尝试了下面的代码，但它以我想要的方式进行了显示，如何将3幅图像与准确放置在其他2幅图像中心的第2张图像对齐？

 <div>
 <img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" />
 <div id="content" align="center"> 
 <img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
 </div>
 <img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/>
 </div>


 <style type="text/css">
 #content {


 width:50%;
 margin-left: auto ;
 margin-right:auto ;


 }

Answer 1

现代方法：flexbox

只需将以下CSS添加到容器元素（此处为div）：

div {
  display: flex;
  justify-content: space-between;
}

div {
  display: flex;
  justify-content: space-between;
}

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

旧方式（对于古代浏览器 - 在flexbox之前）

在容器元素上使用text-align: justify;。

然后拉伸内容以占据100％宽度

MARKUP

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

CSS

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

div {
    text-align: justify;
}

div img {
    display: inline-block;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100%;
}

<div>
 <img src="http://placehold.it/100x100" alt=""  /> 
 <img src="http://placehold.it/100x100" alt=""  />
 <img src="http://placehold.it/100x100" alt="" />
</div>

Answer 2

• 选项1：

  • 不是将图像放在div中，而是将每个图像放在一个范围内。
  • 将第1张和第2张图片浮动到左侧。
  • 给第二张图片留一些左边距。
  • 将右图向右浮动。

始终记得将overflow:hidden添加到所有图像的父级（如果有）中，因为使用带图像的浮动会产生一些副作用。

• 选项2（首选）：

  • 将所有图像放入border =“0”的表格中。
  • 使表格的宽度为100％。

这将是确保第二张图像始终排列到中心的最佳方式，而不必担心桌子的确切宽度。

如下所示：

<table width="100%" border="0">
  <tr>    
  <td><img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" /></td>
  <td><img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" /></td>
  <td><img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/></td>
  </tr>
</table>

Answer 3

这应该是你的答案

<div align="center">
 <img src="@Url.Content("~/images/image3.bmp")" alt="" align="right" style="float:right"/>
 <img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" style="float:left" />
 <div id="content" align="center"> 
     <img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
 </div>
 </div>

Answer 4

HTML：

<div class="container">
    <span>
        <img ... >
    </span>
    <span>
        <img ... >
    </span>
    <span>
        <img ... >
    </span>
</div>

CSS：

.container{ width:50%; margin:0 auto; text-align:center}
.container span{ width:30%; margin:0 1%;  }

我没有测试过这个，但希望这会有用。

您可以将'display：inline-block'添加到.container span以使跨度固定为30％

Answer 5

我假设第一个DIV是#content：

<div id="content">
   <img src="@Url.Content("~/images/image1.bmp")" alt="" />
   <img src="@Url.Content("~/images/image2.bmp")" alt="" />
   <img src="@Url.Content("~/images/image3.bmp")" alt="" />
</div>

和CSS：

#content{
         width: 700px;
         display: block;
         height: auto;
     }
     #content > img{
        float: left; width: 200px;
        height: 200px;
        margin: 5px 8px;
     }