有沒有一種簡單的方法來垂直居中div並讓它們以內聯方式顯示？

我的目標是用這些球體從左到右製作時間線。每個球將佔用其各自的75個像素，然後下一個球將在其右邊，等等。我可以將它們全部垂直居中，但讓它們以內聯方式顯示後，讓我拉出頭髮。我敢肯定，我忽略了一些簡單的東西。有沒有一種簡單的方法來垂直居中div並讓它們以內聯方式顯示？

什麼我當前的代碼的結果： enter image description here

最終目標： enter image description here

我的CSS：

.timeline{ 
float: left; 
margin: auto; 
top: 0; 
bottom: 0; 
position: absolute; 
z-index: 10; 
width: 75px; 
height: 75px; 
} 
#divider{ 
background-color: #bababa; 
height: 4px; 
z-index: 0; 
margin: auto; 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
width: 100%; 
}

代碼段的其餘部分：

<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<div class="orb timeline"></div> 
<span id="divider"></span>

來源

2014-02-20 montelc0

可以直觀地闡明你想達到什麼目的？你的描述很模糊。 – Axel

我分享了我的代碼目前在這裏輸出的照片：http://prntscr.com/2ucb7l 每個球體最終堆疊在彼此的頂部，而不是彼此相鄰。 – montelc0

是，「正在輸出」。我試圖瞭解**最終結果**應該是什麼樣子。 – Axel

不這個幫幫我？

.parent { white-space: nowrap; } 

.timeline{ 
    display: inline-block; 
    position: relative; 
    z-index: 10; 
    width: 75px; 
    height: 75px; 
    background-color: tomato; 
    border-radius: 50%; 
} 

#divider { 
    background-color: #bababa; 
    height: 4px; 
    position: relative; 
    top: 39.5px; /* = 75px/2 + 4px/2 */ 
}

<div class="parent"> 
    <div id="divider"></div> 
    <div class="orb timeline"></div> 
    <div class="orb timeline"></div> 
    <div class="orb timeline"></div> 
    <!-- and so on... --> 
</div>

ONLINE DEMO

UPDATED DEMO（與各地子彈邊框）

來源

2014-02-20 23:32:33

它允許我水平排列球體，但它們仍然停留在頁面頂部。整個事情需要垂直居中。 – montelc0

@ montelc0這裏是** [更新的演示]（http://jsbin.com/gopofoxe/6/edit）**，以滿足您的需求。 –

有沒有一種簡單的方法來垂直居中div並讓它們以內聯方式顯示？

回答

相關問題