Выравнивание HTML-элементов по горизонтали в div

Question

У меня есть три объекта HTML и вы хотите упорядочить предыдущую кнопку слева, следующую кнопку справа и промежуток в середине внутри контейнера div.

<PREVIOUS> |SPAN| <NEXT> 

HTML

<div> 
    <input type="button" value="Previous" id="btnPrevious"/> 
    <span id="spanStage">Stage 5</span> 
    <input type="button" value="Next" id="btnNext"/> 
</div> 

CSS

#btnPrevious 
{ 
    float:left; 
} 
#spanStage 
{ 
    font-weight:bold; 
    vertical-align:middle;  
} 
#btnNext 
{ 
    float:right; 
} 

Answer 1

Просто добавьте text-align: center в свою обертку, чтобы установить горизонтальное выравнивание всех невсплывающие/не позиционируются дети:

div{ 
    text-align:center; 
} 

<span> являются встроенными элементами по умолчанию. Таким образом, вы либо должны использовать display:block на них и соответствующим образом подгонять их, либо немного подкорректировать родительский стиль. Поскольку нет других детей, кроме <span> и <button> s ваш лучший из этого простого решения.

Обратите внимание, что text-align:<value> наследуется от родителя, поэтому, если вы хотите включить что-то еще в свою обертку, вы должны проверить, подходит ли для вас text-align:center. В противном случае используйте text-align:<value> в конкретном элементе, где value - left, right, center или justify.

JSFiddle Demo

Answer 2

Demo

Добавьте класс - line всем элементом детей s, что вы хотите в одной строке и вуаля .. !! .. они Повинуясь вам остаться в линии !! ..

Это трюк -

.line{ 
width:33%; 
float:left; 
} 

Answer 3

Просто добавьте в ваш CSS.

#btnPrevious,#spanStage,#btnNext { 
     width:33%; 
     display:inline-block; 
    } 

Answer 4

Стиль «display: flex» - это хороший способ сделать эти элементы в одной строке. Независимо от того, какой элемент в div. Особенно, если класс ввода является формальным, другие решения, такие как bootstrap, inline-block, не будут работать хорошо.

Пример:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center"> 
    <input type="button" value="Previous" id="btnPrevious"/> 
    <span id="spanStage">Stage 5</span> 
    <input type="button" value="Next" id="btnNext"/> 
</div> 

Более подробно о дисплее: сгибать:

Flex-направление: строка, столбец

оправдать-содержание: Flex-конец, центр, пространство между ними, пространство -ограничение

выносные элементы: стрейч, гибкий старт, гибкий конец, центр