Центрирование выравнивания кнопок внутри div динамически?

У меня есть div, который может иметь 2 или 4 кнопки на основе разных сценариев. Я хочу, чтобы кнопки внутри div были выровнены по центру. Как это можно сделать. Я представил свой код ниже.Центрирование выравнивания кнопок внутри div динамически?

<div style="margin: 0 auto; width: 656px;"> 
    <input type="submit" style="float:left;" value="Prev"/><input type="reset" value="Reset" style="float:left;"/> 
    <input type="submit" value="Submit" style="float:left;"/><input style="float:left;" type="submit" value="Close"/></div>

Проблема заключается в том, что отображаются четыре кнопки, но не для сценариев с 3,2 и 1 кнопками. Как центрировать выравнивание без указания ширины? Помощь Plz.

источник

2014-02-12 OCJP

На элемент контейнера необходимо использовать text-align: center. Кроме того, избегайте использования INLINE стилей ...

<div style="margin: 0 auto; width: 656px; text-align: center;">

Demo

Примечания: Убедитесь, что вы используете text-align: left;, если у вас есть какой-либо текст внутри этой div иначе они будут центрированными, а также.

Как прокомментировал, это выглядит как центр мне

enter image description here

Но вы не верите, что они совершенно по центру, я бы подправить контейнеры width и будет показывают, что они центрированы ....

enter image description here

с 2 кнопками

enter image description here

Примечание: Убедитесь, что вы используете CSS Reset, а также ... Так что вы получите последовательный стилей во всех браузерах, хотя это должно быть сосредоточено независимо от сброса стилей.

источник

2014-02-12 08:31:01

Это не работает. Атрибут width, не позволяющий ему быть точным центром во всех сценариях. – OCJP

..и с двумя кнопками http://jsfiddle.net/eK22Y/1/ - @OCJP В чем проблема? Можете ли вы предоставить сценарий, в котором он не является точным центром? * +1. – George

Для сценария с четырьмя кнопками он будет центром, если кнопка будет уменьшена до 2, если динамический сценарий не будет точно центрирован. – OCJP

Вы можете использовать ниже код и дайте мне знать. Используются только текст Выровнять центр

<div style="margin: 0 auto; width: 656px; text-align:center"> 
<input type="submit" value="Prev"/><input type="reset" value="Reset"/>

источник

2014-02-12 08:32:27 DevelopmentIsMyPassion

Это не работает. – OCJP

Атрибут width, не позволяющий ему быть точным центром во всех сценариях. – OCJP

Мне нравится, если я пользуюсь 1, 2 или 3 кнопками – DevelopmentIsMyPassion

Если кнопки единственными присутствует в вашей DIV, то вы должны дать выравнивания текста: Центру собственности на дела. При этом все внутри div будет выровнено по центру не в зависимости от ширины.

<div style="margin: 0 auto; width: 656px;text-align:center;"> 
<input type="submit" value="Prev"/><input type="reset" value="Reset"/> 
<input type="submit" value="Submit"/><input type="submit" value="Close"/> 
</div>

источник

2014-02-12 08:41:40

Вы можете просто указать text-align: center; стиль для div.

Здесь код для справки.

Style 
--------------------- 
.row { text-align:center; } 
.row input { margin:0px 5px; } 


HTML 
------------------ 
<div class="row"> 
    <input type="submit" value="Prev"/><input type="reset" value="Reset"/> 
    <input type="submit" value="Submit"/><input type="submit" value="Close"/> 
</div>

любой элемент внутри div, имеющий класс 'row', будет выровнен по центру.

источник

2014-02-12 08:55:07

Попробуйте это:

<div style="width:100%"><div style="margin: 0 auto; text-align: center;"> 
<input type="submit" value="One"/><input type="reset" value="Two"/> <input type="submit" value="Three"/><input type="reset" value="Four"/></div></div>

http://jsfiddle.net/eK22Y/10/

источник

2014-02-12 09:36:47 user3300937

Центрирование выравнивания кнопок внутри div динамически?

ответ

Смежные вопросы