У меня есть следующий HTML:
<div class="clearfix">
<div>
<button>a</button>
<button>a</button>
<button>a</button>
<button>a</button>
</div>
</div>
Кнопки отображаются слева и оставляют пространство справа от моего внешнего DIV. Как я могу сделать это так, чтобы кнопки центра сами оставляли пространство слева и справа равным?
если вы хотите, чтобы все кнопки были центрированы в середине вашего div
а остальная часть вашего свободного места была разделена между левым и правым, используйте text-align:center
на контейнере.
------ ** ** ** ** ------
но если вы хотите, чтобы все свободное пространство было разделено поровну между краем элементов, используйте небольшой трюк, включающий text-align:justify
и некоторые псевдоэлементы.
У меня есть два способа разделения пространства.
1) ** --- ** --- ** --- **
2) -- ** -- ** -- ** -- ** -- //I think this has the best visual output
вы можете увидеть разницу и реализации в этой скрипке
margin: auto;
даст вам горизонтальное и вертикальное центрирование, если элемент также имеет определенную ширину (для горизонтали) и высоту (для вертикали).
Пример: http://jsfiddle.net/vQJ3L/
Обновление: другой подход - использовать CSS3 calc для центрирования элемента. Преимущество этого заключается в том, чтобы быть отзывчивым:
Добавьте этот CSS:
.clearfix{
width:500px;
text-align:center;}
Обратитесь к скрипке здесь: http://jsfiddle.net/aasthatuteja/V6fxp/
Согласно вашему HTML:
button {
display: inline-block;
}
div {
text-align: center;
}
Но я бы посоветовал вам добавить некоторые классы здесь, это не очень хорошая идея, чтобы иметь дело с такими селекторами для такого специфического стиля.
Подобно этому с CSS:
.clearfix > div {
text-align: center;
}
.clearfix button {
display: inline-block; // this should be the default state, so it is probably not needed
}
Еще одна вещь, вы должны убедиться, что div внутри .clearfix
имеет ширину. Иначе туда нечего сосредоточиться.
Вы можете использовать display: inline-block
и text-align: center
.
.clearfix > div{
text-align: center;
}
button{
display: inline-block;
}
Вы имеете в виду нечто похожее на это: http://jsfiddle.net/lee_gladding/YEptp/
.clearfix > div {
text-align: center;
}
<div class="clearfix">
<div>
<button>a</button>
<button>a</button>
<button>a</button>
<button>a</button>
</div>
</div>
Надеюсь, это вам поможет.