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