How to center <ul> <li> in content without left & right margin

Question

How to center ul li in content without left & right margin. See what I have and what I need to do:

show image

I must deleted right margins. How can I deleted margin and center li elements without left and right margins?

There's the code:

 .content {width:940px;background:gray;} .content ul {width:100%;padding:0;margin:0;} .content ul li{width:200px;display:inline-block;margin-right: 30px;} .content ul li span{display: block;height: 120px;overflow: hidden;} .content ul li span img{width:100%;} 

 <div class="content"> <ul> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> </ul> </div> 

Answer 1

Solution 1: Use CSS3 flexbox

If you are willing to support most modern browsers that support the flexbox model, it's actually very simple. These are the new rules you need for the parent <ul> element:

.content ul {
  /* Use flexbox */
  display: flex;

  /* Allow wrapping */
  flex-wrap: wrap;

  /* Distribute empty space between elements */
  justify-content: space-between;
}

 .content { width: 940px; background: gray; } .content ul { /* Use flexbox */ display: flex; /* Allow wrapping */ flex-wrap: wrap; /* Distribute empty space between elements */ justify-content: space-between; width: 100%; padding: 0; margin: 0; } .content ul li { width: 200px; /* We don't need this: display: inline-block; */ } .content ul li span { display: block; height: 120px; overflow: hidden; } .content ul li span img { width: 100%; } 

 <div class="content"> <ul> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> </ul> </div> 

Solution 2: Use nth-child to remove right marign

Another solution is to remove the right margin on the last element of each row. In your case, since the images have fixed width, you know that every 4th element is the last one on the row.

So the approach will be:

• Use calc() to calculate space-filling margin between the elements on each row
• Use float: left instead of display: inline-block because we don't want extraneous whitespace that is present for inline elements
• Use overflow: hidden on parent to clear floats

The calc() part is a little complicated, but what you need is:

1. Calculate the remaining free space after content distribution. In this case, you have 960px - (200px * 4)
2. Divide this space between the 3 inter-element spaces

This gives you:

calc((960px - (200px * 4)) / 3);

Warning: This solution will not work if you have unknown number of elements per row, eg when you have dynamic image sizes, uncertain parent width, and etc.

 .content { width: 940px; background: gray; } .content ul { width: 100%; padding: 0; margin: 0; /* Clearfix hack */ overflow: hidden; } .content ul li { width: 200px; /* Use float to position children */ float: left; /* Calculate appropriate margin to fill space up 1. Take the remaining unoccupied space 2. Divide by number of elements - 1 */ margin-right: calc((940px - 200px * 4)/3); } /* No margin for last item on each row ... which in this case, is every 4th child */ .content ul li:nth-child(4n) { margin-right: 0; } .content ul li span { display: block; height: 120px; overflow: hidden; } .content ul li span img { width: 100%; } 

 <div class="content"> <ul> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> <li> <a href="/"> <span><img src="http://az616578.vo.msecnd.net/files/2016/08/09/6360630123516822951123741797_Angel+Food-+High+Res-6766.jpg" /></span> </a> </li> </ul> </div>