div內的兩個div看起來不正確

Question

我有一個容器div和兩個div。

我試圖居中對齊div的內容，但由於某種原因，第二個div看起來不正確的關係到第一個div。

第一內格對齊這樣的：

.main-text { 
position: absolute; 
text-align: center; 
color: red; 
top: 20%; 
width: 100%; 
letter-spacing: .6em; 
} 

第二內格對齊這樣的：

.down-arrow { 
text-align: center; 
width: 100%; 
} 

.bottom { 
color: white; 
position: absolute; 
top: 50%; 
font-size: 2em; 
} 

與與內容「DWN」第二屆內格的外觀關閉演示的完整代碼： http://jsfiddle.net/qbmtap7t/

不知道我做錯了，多虧

Answer 1

您需要將.bottom類的position和top指令移動到.down-arrow這是底部的文本的實際容器：

.down-arrow { 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    text-align: center; 
} 

見Fiddle

Answer 2

使用CSS選擇：嘗試編輯CSS類.down-arrow像這樣：

.down-arrow .bottom { 
    text-align: center; 
    width: 100%; 
} 

觀看演示：

http://jsfiddle.net/qbmtap7t/3/

希望它有幫助。

Answer 3

您爲.bottom應用的樣式，將其應用於.down-arrow並且它可以工作。此外，你似乎有很多html結構只是爲了簡單鏈接，在錨內使用span的任何特定原因？作爲最佳做法，儘量避免不必要的標記。