Центрирование многострочного горизонтального UL без центрирования LI

Question

У меня есть сетка квадратных divs, которые отображаются как li в ul, где ul является многострочным горизонтальным списком. Я хочу, чтобы UL был центрирован (поскольку количество элементов на строку зависит от размера устройства), не имея отдельного LI с центром (как видно во второй строке диаграммы).

Я попытался позиционировать их как относительные встроенные блоки, однако это делает последний LI центрированным в середине, что нежелательно.

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; 
} 

Любые предложения, которые не являются экрана зависит от размера?

Answer 1

Насколько я знаю, что не может быть полностью достигнута, в некоторых резолюциях всегда будет пробел в праве, что Вы не можете удалить проверить это: Aligning div to center and its content to the left

Лучше рупор с помощью чистый CSS будет:

1- используя display: inline-block и text-align: left, как @CBroe сказал:

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- используя position: absolute и 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- использованием display: inline-block и 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:

Если вы готовы использовать некоторые js вы можете сделать это следующим образом:

$(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>

Обратите внимание, что прямо сейчас ul хорошо центрируется внутри div.