putting 2 images side by side with no space and centered
Question
I am trying to get 2 images that are side by side centered on the page and I am completely lost. I've included align="center" in div and it does nothing and I have tried positioning absolute and it kicks that image to center but other is still margined left. I have included my code below for you to see. I'm sure it's fairly easy and my brain is just stuck clocking today. Any help would be much appreciated. Thanks
<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 answers
solution1
0 2017-10-25 16:23:50
Use CSS class instead of inline CSS your CSS goes as follows:
CSS for image tag:
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
CSS for the div you have to contain the image:
.image-container{
display: inline-block;
}
Now the CSS to centre your image:
#image{
text-align:center;
}
Finally how to use it in 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>
Here "display: inline-block" helps you to display two or more images to be displayed side by side and margin as auto helps you to automatically adjust your margin irrespective of the screen size
I hope this solves your need for any further query comment below.
solution2
0 ACCPTED 2017-10-25 18:55:43
You can try these two examples and see if any solves your problem, though presented with the img element.
If you want the body element to be the parent, you can do something like this:
* {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>
And if you want the div to be the parent, like this:
* {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>
Where the .parent takes full width & height of the viewport.
solution3
-1 2017-10-25 15:21:07
try using flex-box, it's pretty straight forward. Set display:flex for the parent, then you can align the children with align-items: center. html like:
<div class="parent">
<div class="item">
<contentful-image url="" />
</div>
<div class="item">
<contentful-image url="" />
</div>
</div>
and css like:
.parent {
display: flex;
align-items: center;
}
solution4
-1 2017-10-25 15:22:02
Try creating parent and child div like this:
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.