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

У меня есть три объекта 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;
}

Ответы

Ответ 1

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

div{
    text-align:center;
}

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

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

JSFiddle Demo

Ответ 2

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

Пример:

<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>

Подробнее о flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-direction: строка, столбец

justify-content: flex-end, центр, пространство между, пространство вокруг

align-items: stretch, flex-start, flex-end, центр

Ответ 3

Просто добавьте это в свой css.

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

Ответ 4

Демо

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

Это трюк -

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