Take a look at this sample:
Here is the HTMl code snippet:
<div class="wrap">
<div class="wrap1">
<div class="image1">This is some text</div>
<div class="image2">This is some text</div>
<div class="image3">This is some text</div>
</div>
<div class="image4">This is some text</div>
<div class="image5">This is some text</div>
</div>
This is the CSS code:
.image1,.image2,.image3{
display: inline-block;
height: 200px;
width: 200px;
background: url(http://placekitten.com/g/300/300);
margin-left:auto;
}
.image4,.image5
{
display: inline-block;
height: 200px;
width: 200px;
background: url(http://placekitten.com/g/300/300);
}
.wrap1{
margin-left:auto;
margin-right:auto;
}
.wrap
{
border:1px solid;
width:700px;
}
How can I center-align the images?
I'm aiming to have all the images in the middle within the bordered square.