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

Question

Я пытаюсь настроить код, который был предварительно написан, поэтому я не эксперт по кодированию, и мне это объяснялось в условиях непрофессионала. В основном, я пытаюсь горизонтально центрировать выравнивание кнопки подписки.

Вот мой код ниже:

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 

Answer 1

Попробуйте это. Это самый простой способ горизонтально сосредоточиться. Поля: 0 auto, автоматически обнаружено, где находится центр, и помещает div в центр страницы.

<div style="margin: 0 auto;" class="clear"> 
    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
</div> 

Answer 2

в CSS должно быть

.clear { 
    text-align:center; 
} 
.clear .button { 
    margin:auto; 
} 

маржа: авто; не всегда необходимо, но в некоторых более упрямых случаях дела обстоят. Таблицы - один из таких экземпляров, которые, похоже, не выравниваются без полей: auto ;. Также убедитесь, что ширина вашего div больше ширины вашей кнопки.

Answer 3

Самый простой способ горизонтального центрирования элемента - установить его margin-left и с правом margin на «auto» в вашем CSS.

Например, укладка элемента по ID:

#mc-embedded-subscribe { 
    margin-left: auto; 
    margin-right: auto; 
} 

Или используйте margin центрировать элементы с классом "кнопки" по горизонтали, без верхнего или нижнего края:

input.button { 
    margin: 0 auto; 
} 

инлайн AleshaOleg в стиль тоже будет работать. (И это, вероятно, лучший способ пойти, если вы не знакомы с CSS.

Answer 4

У вас есть много написать ответ, но я хочу добавить еще некоторые вещи, чтобы это произошло

1. Вы должны используйте «margin: 0 auto», это центрирует выравнивание элемента в его ближайшем контейнере.

2. Ваш контейнер должен иметь ширину больше ширины элемента, который вы хотите центрировать, а div обычно занимает 100% ширины, поэтому вы можете не чувствуйте его центра, пока вы не придадите ему некоторую ширину в% или px.

См. Этот пример. в этом внешнем div имеет 100% ширину, но его дочерний div имеет только ширину, требуемую для кнопки, и центрируется с использованием поля: 0 auto.

http://jsfiddle.net/zud8g/

<div style="width:100%"> 
    <div style="margin:0 auto; width:75px;"> 
     <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
    </div> 
</div>