在相同行中使用相等的空格对齐3个图像？ [英] align 3 images in same row with equal spaces?

问题描述

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

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

尝试了下面的代码，但它的diaplaying我想要的方式，如何对齐3图像与第二个图像正好放置在其他2张图片？

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?

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


 }

推荐答案

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

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

然后将内容拉伸到100 ％width

Then stretch the content to take up 100% width

FIDDLE

FIDDLE

<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%;
}

这篇关于在相同行中使用相等的空格对齐3个图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！