在div中水平對齊HTML元素

Question

我有三個HTML對象，想要在容器div的內部將左側的“上一個”按鈕，右側的“下一個”按鈕排列在中間。

<PREVIOUS> |SPAN| <NEXT>

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

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

Answer 1

“ 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：行，列

證明內容：彈性端，中心，中間間距，周圍間距

對齊項目：拉伸，伸縮開始，伸縮結束，居中

Answer 2

只需在包裝器中添加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演示

Answer 3

在line中將類line添加到所需的所有子元素中， 瞧 ！ 他們正在服從您的要求。

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

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

Answer 4

只需將其添加到您的CSS。

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

Answer 5

嘗試使用display:flex 。

 .header { display: flex; flex-direction: row; justify-content: center; align-items: center; } 

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