将 2 张图像并排放置，没有空间并居中
[英]putting 2 images side by side with no space and centered
问题描述
我试图获得 2 张并排居中的图像，但我完全迷失了方向。 我已经在 div 中包含了 align="center" 并且它什么都不做，我已经尝试定位绝对并将该图像踢到中心但其他的仍然是左边距。 我在下面包含了我的代码供您查看。 我确信这相当容易，而且我的大脑今天只是在计时。 任何帮助将非常感激。 谢谢
<div>
<div class="item">
<contentful-image url="@Model.EventImages[0].File.Url" @*width="300" height="300" *@ style="float:left; width: 30%; margin-bottom: 0.5em; position: absolute " />
</div>
<div class="item">
<contentful-image url="@Model.EventImages[1].File.Url" @*width="300" height="300"*@ style="float:left; width: 30%; margin-bottom: 0.5em";/>
</div>
</div>
4 个解决方案
解决方案1
0 2017-10-25 16:23:50
使用 CSS 类而不是内联 CSS，您的 CSS 如下所示：
图片标签的 CSS：
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
必须包含图像的 div 的 CSS：
.image-container{
display: inline-block;
}
现在使您的图像居中的 CSS：
#image{
text-align:center;
}
最后如何在html中使用它：
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
</div>
<html> <head> <style> .myImg { display: inline-block; margin-left: auto; margin-right: auto; height: 30px; } .image-container{ display: inline-block } #images{ text-align:center; } </style> </head> <body> <div id="images"> <div class="image-container"> <img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/> </div> <div class="image-container"> <img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/> </div> </div> </body> </html>
这里的“display: inline-block”可以帮助您显示两个或更多要并排显示的图像和边距，因为 auto 可以帮助您自动调整边距，而不管屏幕尺寸如何
我希望这可以解决您对以下任何进一步查询评论的需求。
解决方案2
0 已采纳 2017-10-25 18:55:43
您可以尝试这两个示例，看看是否有任何解决您的问题，尽管以img元素呈现。
如果你想让body元素成为父元素，你可以这样做：
* {margin:0;padding:0;box-sizing:border-box} html, body {width:100vw;height:100vh} body { display: flex; justify-content: center; align-items: center; } /* Add this if you want to place them horizontally. */ /* div { display: flex; } */ img { display: block; }
<div> <div class="item"> <img src="http://via.placeholder.com/300x300" alt="img1"> </div> <div class="item"> <img src="http://via.placeholder.com/300x300" alt="img2"> </div> </div>
如果你想让div成为父级，就像这样：
* {margin:0;padding:0;box-sizing:border-box} html, body {width:100vw;height:100vh} .parent { display: flex; justify-content: center; align-items: center; /* flex-direction: column; */ /* Add this if you want to place them vertically. */ width: 100vw; height: 100vh; } img { display: block; }
<div class="parent"> <div class="item"> <img src="http://via.placeholder.com/300x300" alt="img1"> </div> <div class="item"> <img src="http://via.placeholder.com/300x300" alt="img2"> </div> </div>
.parent占据视口的全宽和高度。
解决方案3
-1 2017-10-25 15:21:07
尝试使用 flex-box，它非常简单。 为父项设置 display:flex，然后您可以将子项与 align-items: center 对齐。 html 喜欢：
<div class="parent">
<div class="item">
<contentful-image url="" />
</div>
<div class="item">
<contentful-image url="" />
</div>
</div>
和 css 一样：
.parent {
display: flex;
align-items: center;
}
解决方案4
-1 2017-10-25 15:22:02
尝试像这样创建父子 div：
.parent-container { display: flex; -webkit-flex-wrap: nowrap; } .child-container{ padding: 10px; }
<div class="parent-container"> <div class="child-container"> <img alt="First Image" src=""/> </div> <div class="child-container"> <img alt="Second Image" src="" /> </div> </div>
如何计算居中的div的左侧空间
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.