Html 将同一行中的 3 个图像以相等的间距对齐？

align 3 images in same row with equal spaces?

提问by Harry

i want to align 3 images in same row in a div, the 1st image should be aligned to complete left of page, the third image should be aligned to complete right of the page and the 2nd image should be aligned in exact center of 1st and 3 rd images

我想在 div 的同一行中对齐 3 个图像，第一个图像应该对齐到页面的左侧，第三个图像应该对齐到页面的右侧，第二个图像应该对齐在第一个和第三张图片

tried the below code but its diaplaying the way i want, how to align the 3 images with the 2nd image placed exactly in the center of the other 2 images?

尝试了下面的代码，但它以我想要的方式显示，如何将 3 张图像与恰好位于其他 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 ;


 }

回答by Danield

The modern approach: flexbox

现代方法：flexbox

Simply add the following CSS to the container element (here, the div):

只需将以下 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>

The old way (for ancient browsers - prior to flexbox)

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

Use text-align: justify;on the container element.

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

Then stretch the content to take up 100% width

然后拉伸内容以占据 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

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>

回答by SatyaGahan

• Option 1:

  • Instead of putting the images inside div put each one of them inside a span.
  • Float 1st and 2nd image to left.
  • Give some left padding to the 2nd image.
  • Float the right image to right.

• 选项1：

  • 不是将图像放在 div 中，而是将每个图像放在一个跨度内。
  • 将第 1 个和第 2 个图像向左浮动。
  • 给第二张图片一些左边的填充。
  • 将正确的图像向右浮动。

Always remember to add overflow:hiddento the parent (if you have one) of all the images because using floats with images have some side effects.

永远记住添加overflow:hidden到所有图像的父级（如果你有一个），因为使用带有图像的浮动会有一些副作用。

• Option 2 (Preferred):

  • Put all the images inside a table with border="0".
  • Make the width of the table 100%.

• 选项 2（首选）：

  • 将所有图像放在一个带有 border="0" 的表格中。
  • 使表格的宽度为 100%。

This will be the best way to make sure the 2nd image is alligned to the center always without worrying for the exact width of the table.

这将是确保第二张图像始终与中心对齐而无需担心表格的确切宽度的最佳方法。

Something like below:

像下面这样：

<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>

回答by mohkhan

This should be your answer

这应该是你的答案

<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>

回答by Gokul Gopala Krishnan

HTML:

HTML：

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

CSS:

CSS：

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

I haven't tested this, but hope this will work.

我还没有测试过这个，但希望这会奏效。

You can add 'display:inline-block' to .container span to make the span to have fixed 30% width

您可以将 'display:inline-block' 添加到 .container 跨度以使跨度具有固定的 30% 宽度

回答by Aldi Unanto

I assumed the first DIV is #content:

我假设第一个 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>

And CSS :

和 CSS ：

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