Немного отступлю от темы, к вопросу выравнивания. Выровнять по центру элемент с заданной шириной можно с помощью - margin. То есть задаем ширину и отступ, выглядит это примерно так.
.div{ width:250px; margin:0 auto; }
Если блок имеет ширину в процентах, то свойство auto уже не поможет, но это не страшно, нужно просто применить немного математики.
Например блок у нас имеет ширину 40% от родителя. Чтобы его выровнять, нам надо отступить равномерно от обеих краев. Если ширина родителя 100% - 40% ширины нашего блока, остается 60%, значит по 30% на каждую сторону. Значит задаем такие параметры в стилях:
.div{ width:40%; margin-left:30%; }
Но тут следует учесть, маленькое НО! Если вы зададите блоку padding, его ширина увеличится, и выравнивание будет неровным. Поэтому следует это учесть, задавая внутренний отступ - padding в процентах, а потом от отступа слева отнимать этипроценты:
.div{ width:40%; padding:0 5%; margin-left:25%; }
Ну или же прописать блоку параметр box-sizing:padding-box; - он применяется для изменения алгоритма расчета ширины и высоты элемента, то есть ширина останется 40%, не смотря на padding.
Теперь вернемся к нашему случаю, когда нет ширины, вообще. Такое иногда встречается, и задавать ширину нам не нужно, как же быть в такой ситуации.
Есть один простенький способ, который состоит в том, что сначала мы смещаем наш блок вправо на половину ширины родителя, а потом двигаем влево на половину своей собственной ширины. Если посмотреть на код, то это будет выглядеть так:
<div class="container"> <div class="block">Содержание блока</div> </div>
И стили. которые все и сделают.
.container { float: left; position:relative; left: 50%; } block { position:relative; left: -50%; float: left; }
Теперь все станет четко по центру, но есть опять маленькое НО! Если Вы будете применять данный метод при адаптивной верстке, то у Вас появится маленький глюк, при уменьшении ширины страницы, родитель блока, будет на пол своей ширины вылазить за весь контент. Поэтому всю эту конструкцию нужно заключить еще в один блок или тому блоку в котором они уже у Вас находятся, нужно добавить нужную ширину и свойство - overflow:hidden;, которое обрежет все, что будет вылазить за пределы. Ваш блок и останется в центре, но пустота справа исчезнет, при маленьком размере страницы.
На этом все, спасибо за внимание. 🙂