在div中水平對齊HTML元素

我有三個HTML對象，並且想要在左側排列Previous按鈕，在右側排列Next按鈕，並在容器div內部跨越中間。在div中水平對齊HTML元素

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

來源

2012-06-16 gigi

你有沒有考慮過使用flexbox？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – chchrist

只需添加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

來源

2012-06-16 12:20:10 Zeta

Demo

類添加 - line所有的孩子們元素您在單行希望S和瞧 .. !! ..他們服從你留在一條線上!!

這是絕招 -

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

來源

2012-06-16 12:18:54

只需添加到您的CSS。

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

來源

2016-08-30 15:03:50 Taiti

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

更多細節有關顯示：撓曲：

撓曲方向：行，列

證明含量：彎曲端，中心的，空間之間，空間-dound

align-items：stretch，flex-start，flex-end，center

來源

2017-12-08 02:08:15

在div中水平對齊HTML元素

回答

相關問題