how to align all li elements in the center in ul

Question

There is a list of ul . In it li in the form of tiles. li is set float:left; . Accordingly, all li are horizontal. The width li set in percent , the height is set in px .

If you change the size of the browser, those tiles that do not fit are transferred to the next line and there is an empty space on the right. From this there is a need to align everything in ul in the center. If you set the margin , then nothing works ... Are there any options?

 ul li { list-style-type: none !important; } .feed-main { width: 100%; /* height: calc(100% - 21px); */ padding: 10px 10px 10px 10px !important; } .feed-main ul{ width: 100%; /* height: 100%; */ background: #FFF; padding: 5px 5px 5px 5px !important; } .feed-main ul li.link-block{ width: 13.44%; height: 123px; float: left; background: #ECECEC; margin: 0 5px 10px 5px !important; }

 <div class="feed-main"> <ul> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> </ul> </div>

user33274 · Answer 1 · 2016-05-16T07:04:50

 ul{ display:table; margin:auto; } li{ display:table-cell; text-align:center; padding:3px 10px; } a{ display:table-cell; valign:bottom; }

 <ul> <li><a href="">Ссылка #1</a></li> <li><a href="">Ссылка #2</a></li> <li><a href="">Ссылка с длинным текстом</a></li> <li><a href="">Ссыдка обычная</a></li> </ul>

Demo CodePen squeeze the screen and see how this layout behaves

Did as you suggested and I have all li merged into one line.
Well, let's say. Initially it will be 77. When scrolling, 49 will be added. In general, the number of li depends on the number of records in the database - this is in the future.
After all, for the formation of li, data will be needed in the database.
I added 7 more li and now I started to load more li when scrolling.
then my solution is not for your example, Flat layout will suit you, read about this view

toxxxa toxxxa 1,093 five nineteen · Answer 2 · 2016-05-16T08:08:43

Do you expect such a result?

 ul li { list-style-type: none !important; } .feed-main { width: 100%; padding: 10px 10px 10px 10px !important; text-align: center; } .feed-main ul{ width: 100%; background: #FFF; padding: 5px 5px 5px 5px !important; } .feed-main ul li.link-block{ width: 13.44%; height: 123px; display: inline-block; background: #ECECEC; margin: 0 5px 10px 5px !important; }

 <div class="feed-main"> <ul> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> <li class="link-block"></li> </ul> </div>

When I scroll the page, 49 li-s are added to the end of ul with JS.
li those that are written originally displayed as you did, but those elements that adds JS they are not displayed like that ...
lay out everything on jsfiddle.net (or rather not everything, but only those pieces of code that are relevant :)
as far as I understand, the problem here is that jquery creates a new DOM element <li> after the styles have been applied.
but try not to create it through appent('<li>...</li>') , but to clone $('li.link-block').clone().appendTo('.feed-main ul') .

Nicolas Chabanovsky ♦ 38.2k 54 220 437 · Answer 3 · 2016-05-17T14:57:09

Try through Flex:

 .feed-main ul{ width: 100%; background: #FFF; padding: 5px !important; display: flex; flex-wrap: wrap; justify-content: space-around; }

I am sure the author of the question would be grateful for your expert commentary on the code above.

how to align all li elements in the center in ul

3 answers 3

More articles: