I have some code below that displays 6 images. I want to display all 3 images under imagegroup0 horizontally next to each other and then all images of imagegroup1 horizontally as well, but under the images of imagegroup0. The code posted below works unless the image is large enough so that not all 3 images are visible without scrolling. When the images get too large, my browser displays them vertically. My questions are:
1.How do I force the images of an image group to display horizontally even if it requires horizontal scrolling?
2.Is there a way to do that without having to declare the image groups to display explicitly? Basically, I want to say, under a place horizontally. (All images will be same size so alignment does not matter).
#imagegroup0 div {
display: inline-block;
}
#imagegroup1 div {
display: inline-block;
}
<div id="imagegroup0">
<div id="image0.0">
<figure>
<img src="example.jpg" />
<figcaption>image</figcaption>
</figure>
</div>
<div id="image0.1">
<figure>
<img src="example.jpg" />
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image0.2">
<figure>
<img src="example.jpg" />
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div id="imagegroup1">
<div id="image1.0">
<figure>
<img src="example.jpg" />
<figcaption>image</figcaption>
</figure>
</div>
<div id="image1.1">
<figure>
<img src="example.jpg" />
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image1.2">
<figure>
<img src="example.jpg" />
<figcaption>image3</figcaption>
</figure>
</div>
</div>
Update: Here's what I ended up doing based on feedback below:
<html>
<head>
<title>images</title>
<style>
.group {
white-space: nowrap;
}
.group div {
display: inline-block;
}
</style>
</head>
<body>
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div class="group">
<div>
<figure>
<img src="example.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div>
<figure>
<img src="example.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
</body>
</html>
Use white-space: nowrap and use classes to avoid writing out every class.
nowrap means all elements will stay on same line even if there is no more space for them and they would normally break on closest still in-box white-space
.group {
white-space: nowrap;
}
.group div {
width: 50px;
height: 50px;
display: inline-block;
border: 1px solid white;
background-color: red;
}
<div class="group" id="imagegroup0">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="group" id="imagegroup1">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
#imagegroup0, #imagegroup1{
display: flex;
text-align: center;
overflow: auto;
}
<div id="imagegroup0">
<div id="image0.0">
<figure>
<img src="example.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div id="image0.1">
<figure>
<img src="example.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image0.2">
<figure>
<img src="example.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div id="imagegroup1">
<div id="image1.0">
<figure>
<img src="example.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div id="image1.1">
<figure>
<img src="example.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image1.2">
<figure>
<img src="example.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
You can give width: 30%; for each div.
#imagegroup0 div {
display: inline-block;
width: 30%;
}
#imagegroup1 div {
display: inline-block;
width: 30%;
}
<div id="imagegroup0">
<div id="image0.0">
<figure>
<img src="example.jpg" />
<figcaption>image</figcaption>
</figure>
</div>
<div id="image0.1">
<figure>
<img src="example.jpg" />
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image0.2">
<figure>
<img src="example.jpg" />
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div id="imagegroup1">
<div id="image1.0">
<figure>
<img src="example.jpg" />
<figcaption>image</figcaption>
</figure>
</div>
<div id="image1.1">
<figure>
<img src="example.jpg" />
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image1.2">
<figure>
<img src="example.jpg" />
<figcaption>image3</figcaption>
</figure>
</div>
</div>
One of the Posible solution is to use "Bootstrap framework"
<html>
<head>
<title>images</title>
<style>
#imagegroup0 div
{
display:inline-block;
}
#imagegroup1 div
{
display:inline-block;
}
img
{
width:133px;
height:133px;
}
</style>
</head>
<body>
<div id="imagegroup0">
<div id="image0.0">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div id="image0.1">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image0.2">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
<div id="imagegroup1">
<div id="image1.0">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image</figcaption>
</figure>
</div>
<div id="image1.1">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
<div id="image1.2">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</div>
</body>
</html>
Answers to your questions:
1.How do I force the images of an image group to display horizontally even if it requires horizontal scrolling?
- You can use bootstrap and use class "table" which is fully responsive and it automatically displays images horizontally manner.
2.Is there a way to do that without having to declare the image groups to display explicitly?
- Yes, as i said in answer of Q-1 you can use bootstrap "table"
<html>
<head>
<title>images</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
#imagegroup0 div
{
display:inline-block;
}
#imagegroup1 div
{
display:inline-block;
}
img
{
width:333px;
height:333px;
}
</style>
</head>
<body>
<div class="table-responsive">
<table class="table">
<tr>
<td>
<div id="image0.0">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image1</figcaption>
</figure>
</div>
</td>
<td>
<div id="image0.1">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
</td>
<td>
<div id="image0.2">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</td>
</tr>
<tr>
<td>
<div id="image0.0">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image1</figcaption>
</figure>
</div>
</td>
<td>
<div id="image0.1">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image2</figcaption>
</figure>
</div>
</td>
<td>
<div id="image0.2">
<figure>
<img src="https://cdn.pixabay.com/photo/2014/10/16/20/04/eye-491625_960_720.jpg"/>
<figcaption>image3</figcaption>
</figure>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Answers to your questions:
1.How do I force the images of an image group to display horizontally even if it requires horizontal scrolling?
You can use bootstrap and use class "table" and "table-responsive" which is fully responsive and it automatically displays images horizontally manner and gives you a scroll whenever require.
2.Is there a way to do that without having to declare the image groups to display explicitly?
Yes, as I said in answer to Q-1 you can use bootstrap "table"
Thank you!
Related
my relative html code now is like this. I haven't add the title in the below code yet. Please help. Thank you.
<div class="body">
<div class="intro">
<h1>Main.</h1>
<h3>type something</h2>
<section class="buttonone">
<button>Sign up</button>
</section>
</div>
<section class="container">
<figure>
<div class="random"><img src="drink.jpg" alt=""></div>
<figcaption>lemonade</figcaption>
</figure>
<figure>
<div class="random"><img src="toro.jpg" alt=""></div>
<figcaption>omakasa-Toro sushi</figcaption>
</figure>
<figure>
<div class="random"><img src="noodle.jpg" alt=""></div>
<figcaption>ramei</figcaption>
</figure>
<figure>
<div class="random"><img src="oyster.jpg" alt=""></div>
<figcaption>oyster sushi</figcaption>
</figure>
</section>
use flexbox
img {
width: 10vw;
}
.container {
display: flex;
justify-content: space-around;
}
#title{
text-align:center;
border:solid 1px black;
}
figure{
border:solid 1px black;
padding:6px;
}
<div id='title'>my Title</div>
<section class="container">
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>lemon</figcaption>
</figure>
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>omaka</figcaption>
</figure>
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>ramei</figcaption>
</figure>
<figure>
<div class="random"><img src="https://via.placeholder.com/150" alt=""></div>
<figcaption>oysteri</figcaption>
</figure>
</section>
you just need to add flexbox to your CSS code! with justify-content
I also used css grid for centering vertically easily using the new place-items css property
.container {
/* make items one near the other in the X axis */
display: flex;
justify-content: space-around;
}
img {
/* if the image is a lot bigger, it will be resized and be responsive */
max-width: 100%;
}
/* centering vertically */
.container>figure,
.intro {
display: grid;
place-items: center;
}
<div class="body">
<div class="intro">
<h1>Main.</h1>
<h3>type something</h2>
<section class="buttonone">
<button>Sign up</button>
</section>
</div>
<section class="container">
<!-- 1 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>lemonade</figcaption>
</figure>
<!-- 2 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>omakasa-Toro sushi</figcaption>
</figure>
<!-- 3 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>ramei</figcaption>
</figure>
<!-- 4 -->
<figure>
<div class="random">
<img src="https://picsum.photos/200" alt="">
</div>
<figcaption>oyster sushi</figcaption>
</figure>
</section>
</div>
Make a parent container class=container and make two child containers class=text centre for center aligned text and class=img grid for the image grid.
Now your parent container class will be having display: flex property with flex-grow or width property now for text you'll be putting text-align: center and for grid class you'll be using justify-content: space-between
Simply you have to add css h1 {text-align: center;}
.container{
display:flex;
}
h1{
text-align: center;
}
img{
max-width: 100%;
}
<div class="body">
<div class="intro">
<h1>Title</h1>
</div>
<section class="container">
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
<figure>
<div class="random">
<img src="https://i.picsum.photos/id/1076/201/201.jpg?hmac=w0KXxl0av8l5EHqgJfjULxPosXBvFTV86-fnAGgZbnY" alt="">
</div>
</figure>
</section>
</div>
Use display: flex; justify-content: center; and make sure you have a width of a 100% and those CSS properties will work almost everywhere.
<div class="body">
<div class="intro">
<h1>Main.</h1>
<h3>type something</h2>
<section class="buttonone">
<button>Sign up</button>
</section>
</div>
<h1 class="title">Title</h1>
<section class="container">
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>lemonade</figcaption>
</figure>
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>omakasa-Toro sushi</figcaption>
</figure>
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>ramei</figcaption>
</figure>
<figure>
<div class="random">
<img src="./pexels-till-daling-12461880.jpg" alt="">
</div>
<figcaption>oyster sushi</figcaption>
</figure>
</section>
</div>
.title {
width: 100%;
display: flex;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
}
img {
width: 10rem;
height: 10rem;
}
Here is the code of the gridbox, I have currently.
.service-box-container{
display: grid;
grid-template-columns: repeat(3, 2fr);
gap: 15px;
}
.service-box-container img{
max-width: 100%;
width: 100%;
object-fit: cover;
object-position: center;
height: 460px;
border-radius: 20px;
}
<div class="service-box-container">
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
<div class="service-box">
<figure>
<img src="https://via.placeholder.com/350" class="" alt="">
</figure>
</div>
</div>
Design I am looking to acheive:
I want to show only two items on every even row and 3 items on every odd row using grid css. This should be applicable to any additional rows as well.
Currently it is showing same style on both odd and even row. Here, is the https://jsfiddle.net/fk9y0uhd/3
Use grid-row-start and grid-row-end properties same like for column as well grid-col-start and grid-col-end to make this layout. this will help you out
https://www.youtube.com/watch?v=xBSlwwitD5U&t=867s check. OR use 3 column grid for odd one and 6 column grid for evens.
I have the below code in Bootstrap that display an image:
<div class="work">
<img class="anim" src="1.png" alt="Text1">
<img class="anim" src="2.jpeg" alt="Text2">
<img class="anim" src="3.jpeg" alt="Text3">
<img class="anim" src="4.jpeg" alt="Text4">
</div>
The result looks like this:
How can I add some heading/title to each picture in order to describe the purpose of each one?
Try this code with Bootstrap grid system and using h3 to insert title of image
<div class="row">
<div class="col-sm-6">
<h3>Text</h3>
<img class="anim" src="1.png" alt="Text1">
</div>
<div class="col-sm-6">
<h3>Text</h3>`
<img class="anim" src="2.png" alt="Text1">
</div>
<div class="col-sm-6">
<h3>Text</h3>
<img class="anim" src="3.png" alt="Text1">
</div>
<div class="col-sm-6">
<h3>Text</h3>
<img class="anim" src="4.png" alt="Text1">
</div>
</div>
You can use the figure element for this which Bootstrap has styling for, e.g
<div class="work">
<figure class="figure">
<figcaption class="figure-caption">Image 1</figcaption>
<img class="anim figure-img" src="1.png" alt="Text1">
</figure>
<figure class="figure">
<figcaption class="figure-caption">Image 2</figcaption>
<img class="anim figure-img" src="2.png" alt="Text2">
</figure>
<figure class="figure">
<figcaption class="figure-caption">Image 3</figcaption>
<img class="anim figure-img" src="3.png" alt="Text3">
</figure>
<figure class="figure">
<figcaption class="figure-caption">Image 4</figcaption>
<img class="anim figure-img" src="4.png" alt="Text4">
</figure>
</div>
I have a Bootstrap website that has a div wrapper and then 1 - 6 possible divs in side. These are 200px wide and need to be spaced equally inside.
<div class="container">
<div class="row">
<div class="wasps_home_footer_blocks_container">
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block col-md-2 ">
<figure> <img src="test.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
</div>
</div>
CSS:
.wasps_home_footer_blocks_container {
width: 100%;
margin: auto;
margin-top: auto;
margin-top: 20px;
}
.wasps_home_footer_block {
width: 200px;
text-align: center;
}
This shows the four divs but left aligned in the .wasps_home_footer_blocks_container div.
The wasps_home_footer_block divs need to be in the middle of the containing div equally spaced apart. (See attached image)
Better to use Flexbox instead of Bootstrap Grid, in this case.
You can remove the commented code to see additional blocks added.
.wasps_home_footer_blocks_container {
display: flex;
width: 100%;
margin: auto;
margin-top: auto;
justify-content: center;
}
.wasps_home_footer_block {
width: 200px;
margin: 20px;
text-align: center;
max-height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="wasps_home_footer_blocks_container">
<div class="wasps_home_footer_block">
<figure>
<img src="http://www.martialartsmoviejunkie.com/wp-content/uploads/2014/08/Drunken-Master.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure>
<img src="https://s3.drafthouse.com/images/made/drunken-master-1_758_426_81_s_c1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure>
<img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<!--UNCOMMENT ME-->
<!-- <div class="wasps_home_footer_block">
<figure> <img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
<div class="wasps_home_footer_block">
<figure> <img src="http://blackbeltmag.com/wp-content/uploads/DrunkenMasterII1.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div> -->
<div class="wasps_home_footer_block">
<figure>
<img src="http://media1.break.com/dnet/media/450/925/2925450/7-martial-arts-movies-you-need-to-see-image-7.jpg" alt="" class="img-responsive">
<figcaption>
<h4>Test link</h4>
</figcaption>
</figure>
</div>
</div>
</div>
I have a image gallery which is not straighting/fullfilling the full width in a row
html
<div class="col-md-6">
<figure class="gallery">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
</figure>
</div>
css
.gallery{
display:table;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
display:table-cell is also not working . There is 6 images here
.gallery{
display:table;
white-space: nowrap;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
<div class="col-md-6">
<figure class="gallery">
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
</figure>
</div>
From what I understood (since you have not mentioned the image size.)
.gallery{
}
.gallery > div{
padding:2px;
}
.gallery img{
background: transparent;
width:100%;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="gallery row">
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
</div>
</div>
Add Below css
.gallery{
display:table;
margin:0;
}
DEMO