I've four li
tags and they all contains images in it. Now, I want to show images vertically center and for this I've used display: table-cell
for all li
and on image I've used vertical-align middle. But margin isn't working when I am trying to put spacing between li's.
Here is the JSFiddle
HTML
<div class="achievements">
<h2>Our <span>Achievements</span></h2>
<ul>
<li>
<img src="images/award-1.png">
</li>
<li>
<img src="images/award-2.png">
</li>
<li>
<img src="images/award-3.png">
</li>
<li>
<img src="images/award-4.png">
</li>
</ul>
</div>
CSS
.achievements ul {
margin: 0;
padding: 0;
list-style: none;
}
.achievements ul li {
min-width: 304px;
min-height: 208px;
vertical-align: middle;
display: table-cell;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0px 0px 3px #aaa;
color: #000;
margin-right: 14px;
padding-bottom: 32px;
max-width: 303px;
background: #fff;
font-family:'gafata';
padding-top: 32px;
line-height: 23px;
text-align:center;
}
.achievements ul li img {
vertical-align: middle;
}
Make a new div with whatever name (I will just use table-split) and give it a width, without adding content to it, while placing it between necessary divs that need to be separated. You can add whatever width you find necessary.
To set cell padding in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property padding.
HTML | <table> cellspacing Attribute. The HTML <table> cellspacing Attribute is used to specify the space between the cells. The cellspacing attribute is set in terms of pixels.
Use border-spacing
to add spacing between the cells.
In order for this to have an effect on the table, the border-collapse
value should be separate
(the default value) as opposed to collapse
.
Updated Example
.achievements ul {
margin: 0;
padding: 0;
list-style: none;
display:table;
border-spacing: 10px;
border-collapse: separate;
}
If you want to center the table, simply add margin:0 auto
. (example)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With