css встроенные элементы блока, последний ребенок, чтобы плавать влево при использовании text-align: center на родительском div

Question

Здесь у вас есть код и демо-версия проблемы. Если вы видите, что последние два черных ящика находятся в центре, есть ли способ показать их на левой стороне?

mainparent 
{ 
    width:500px; 
    height:200px; 
    text-align:center; 
    background:#ccc; 
} 
.boxes 
{ 
    width:50px; 
    height:50px; 
    display:inline-block; 
    margin-left:5px; 
    background:#000; 
} 

DEMO

Answer 1

Почему бы просто не поплавать их влево? (и изменить размер контейнера, чтобы подогнать их ..)

Таким образом, вы лучше контролировать обочину, так как font-size не влияет на них (ни пробельные)

#mainparent 
{ 
    width:480px; 
    height:200px; 
    background:#ccc; 
} 
.boxes 
{ 
    width:50px; 
    height:50px; 
    float:left; 
    margin:5px; 
    background:#000; 
} 

Demo в http://jsfiddle.net/JxhP8/32/

---

Update

Если вы хотите элементы выравниваются по левому краю между собой, но центр выровнены в их контейнере, вам нужен еще один элемент в середине и некоторые JavaScript ..

Вот реализация JQuery

HTML

<div id="mainparent"> 
    <div class="centerized"> 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
     .. 
     .. 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
     <div class="boxes"></div> 
    </div> 
</div> 

CSS

#mainparent 
{ 
    background:#ccc; 
} 
.centerized{ 
    overflow:hidden; // to grow according to the boxes 
    margin:0 auto; // to be centered in container 
} 

JQuery

$(function(){ 
    // cache the repeatedly used elements 
    // and fixed values 
    var main = $('#mainparent'), 
     centerized = main.find('.centerized'), 
     itemWidth = main.find('.boxes').outerWidth(true); 

    $(window).resize(function(){ 
     var fitItems = (main.width()/itemWidth) | 0; 
     centerized.width(fitItems * itemWidth); 
    }).trigger('resize'); 
}); 

Demo вhttp://jsfiddle.net/JxhP8/34/

Answer 2

Изменить ваш CSS #mainparenttext-align к left.

Answer 3

Поскольку у вас уже есть ответы, альтернатива использовать CSS селекторы

#mainparent 
{ 
    width:500px; 
    height:200px; 
    text-align:center; 
    background:#ccc; 
} 
.boxes 
{ 
    width:50px; 
    height:50px; 
    display:inline-block; 
    margin-left:5px; 
    background:#000; 
} 

.boxes:nth-child(17) 
{float:left; margin-left:21px;} 

.boxes:nth-child(18) 
{float:left; margin-left:9px;} 

JSFIDDLE

У вас еще есть работа, чтобы сделать, чтобы получить расположение правильно, это работает только тогда, когда у вас есть фиксированное число коробок и т. д., но вы можете найти этот подход полезным (или ужасно знать, чтобы не использовать его снова!)