将 2 个图像并排放置，没有空间并居中答案

【问题标题】：putting 2 images side by side with no space and centered将 2 个图像并排放置，没有空间并居中
【发布时间】：2017-10-26 02:55:43
【问题描述】：

我正在尝试获取 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>

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
..并且居中的第一条规则是“不要使用浮动！”

标签： javascript html css

【解决方案1】：

您可以尝试这两个示例，看看是否有任何解决您的问题的示例，尽管显示的是 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 占据视口的全宽和全高。

【讨论】：

【解决方案2】：

使用 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 可帮助您自动调整边距，而与屏幕大小无关

我希望这能解决您对下面任何进一步查询评论的需求。

【讨论】：

【解决方案3】：

尝试使用 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】：

尝试像这样创建父子 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>

【讨论】：