Search code examples
htmlcsshtml-listscentering

Centering a multiline horizontal UL without centered LI

I have a grid of square divs that are displayed as li in a ul where the ul is styled to be a multiline horizontal list. I want it so the UL is centered (as the number of items per line varies by device size) without having the individual LI centered (as seen in the second row of the diagram).

I've tried positioning them as relative inline-blocks, however that makes the last LI centered in the middle, which is not desirable.

ul
{
    position:relative;
    display:inline-block;
    padding:0px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
li
{
    margin-left:5px;
    position:relative;
    display:inline-block;
    vertical-align: top;
}

Layout diagram

Any suggestions that aren't screen-size dependent?

Solution

  • So far as I know that can not be fully achieved, at certain resolutions will always be a space in right that you can't remove check out this: Aligning div to center and its content to the left

    enter image description here

    Your best shout using pure css will be:

    1- using display: inline-block and text-align: left as @CBroe said:

    body{
    text-align: center;
}
ul{
    display: inline-block;
    padding: 0;
    text-align: left;
    width: 50%;
}

li{
    width: 50px;
    height: 50px;
    border: 1px solid;
    margin: 7px;
    list-style: none;
    display: inline-block;
}
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

    2- using position: absolute and transform:

    ul{
    position: absolute;
    padding: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

li{
    width: 50px;
    height: 50px;
    border: 1px solid;
    margin: 7px;
    list-style: none;
    display: inline-block;
}
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

    3- using display: inline-block and float: left:

    body{
    text-align: center;
}
ul{
    display: inline-block;
    padding: 0;
    width: 50%;
    overflow: hidden;
}

li{
    width: 50px;
    height: 50px;
    border: 1px solid;
    margin: 7px;
    list-style: none;
    float: left;
}
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

    Edit:

    If you are willing to use some js you can do it like this:

    $(document).ready(function() {
   setWidth();
     $(window).resize(function(){
             setWidth()
     });
});

function setWidth(){
    var $ul = $('ul');
    var $li = $('li');

    $ul.css('width', 'auto');

    var ulWidth = $ul.outerWidth();
    var liWidth = $li.outerWidth();
    liWidth += parseInt($li.css('margin-left')) + parseInt($li.css('margin-right'));

    var div = Math.floor(ulWidth / liWidth);

    $ul.css('width', div * liWidth);
}
    body{
  text-align: center;
}
div{  
  width: 50%;
  margin: 0 auto;
  border: 2px solid blue;
  padding: 25px;
}
ul{
  display: inline-block;
  padding: 0;
  overflow: hidden;
  border: 2px solid red;
}

li{
  width: 50px;
  height: 50px;
  border: 1px solid;
  margin: 7px;
  list-style: none;
  float: left;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>this is the div <br/>
 \|/ </p>
<div>
 <p>this is the ul <br/>
 \|/ </p>
  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>
</div>

    Notice that right now the ul is well centered inside the div.