Кнопка горизонтального выравнивания

Я пытаюсь выровнять кнопку по горизонтали с помощью CSS. Вот моя разметка:

<button type="button" class="primary-button download-button">Download</button>

И мой соответствующий CSS:

.primary-button {
    font-family: Arial, sans-serif;
    font-size: 1.3em;
    color: #fff;
    border: 1px solid #004487;
    background-image: -webkit-gradient(linear, top, bottom, from(#5288bd), to(#2f659a));
    background-image: -webkit-linear-gradient(top, #5288bd, #2f659a);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 1px 0px rgba(255, 255, 255, .7);
    text-shadow: 0px -1px 0px black;
    cursor: pointer;
}

.download-button {
    padding: 10px 20px;
    border-radius: 5px;
    display: block;
    margin: 10px auto 0px auto;
}

Тем не менее, он по-прежнему выровнен по левому краю. Я думал, что установка margin: 10px auto 0px auto; выровняет его по горизонтали, поскольку теперь он является блочным элементом, но, по-видимому, это не так.

Я также пытался обернуть его в div и использовать text-align: center, но это тоже не работает.


button html css
person James Dawson    schedule 07.06.2012    source источник
comment
У меня работает (Chrome).   -  person PeeHaa    schedule 07.06.2012
comment
Не для меня. Также Chrome, версия 19. :/   -  person James Dawson    schedule 07.06.2012
comment
вы можете отцентрировать его, добавив фиксированную ширину.   -  person Bob    schedule 07.06.2012
comment
Попробуйте установить float на none на кнопке, а контейнер — на text-align на center.   -  person TrySpace    schedule 16.03.2015

Ответы (2)


arrow_upward
7
arrow_downward

Дайте кнопке ширину. См. этот пример jsFiddle.

.download-button {
    padding: 10px 20px;
    border-radius: 5px;
    display: block;
    width: 130px;
    margin: 10px auto 0px auto;
}​

Без ширины вы пытаетесь центрировать элемент уровня блока, который соответствует полной ширине его контейнера. Явно установив ширину (например, 130 пикселей на вашей кнопке), правило центрирования полей работает.

person j08691    schedule 07.06.2012
comment
Да, автоматический трюк margin: 0 не работает, если вы не укажете ширину элемента. - person jeschafe; 07.06.2012
comment
Хм? Я схожу с ума? jsfiddle все портит? Потому что какой ОП работает для меня: jsfiddle.net/PeeHaa/J8juB? - person PeeHaa; 07.06.2012
comment
@RepWhoringPeeHaa - К счастью, вы не сходите с ума, однако без правила ширины Chrome и Safari не центрируют кнопку. Хотя IE и FF это делают. - person j08691; 07.06.2012
comment
Ага. У меня есть Chrome 20 и 21, которые центрируют его. Сафари действительно нет. Tnx. Теперь я могу умереть спокойно ;) @j08691 - person PeeHaa; 07.06.2012

arrow_upward
0
arrow_downward

На самом деле установка float на none, если у обоих есть position: relative, должна работать:

.container{
  text-align: center;
 }
.button{
  float: none;
}
person TrySpace    schedule 16.03.2015