如何將這些重疊元素居中？

-1

該頁面是here。來源非常簡單。我試過用absolute定位和其他一些方法來做這件事，但沒有一件完全正確。如何將這些重疊元素居中？

2012-12-17 Casey Dwayne

將始終有三個或者您也可以在後端多少會有確定？ –

使用絕對值工作。該鏈接包含一個工作示例。請upvote所以我可以再發帖.. –

我改變了這些：

#title { 
    position:absolute; 
    width:240px; 
    height:240px; 
    z-index:99; 
} 
#space-link { 
    position:absolute; 
    margin:auto; 
    top:40%; 
    left:30%; 
    font-family: 'Josefin Slab', serif; 
    font-size:2em; 
    color:#FFF; 
    z-index:99; 
}

要這樣：

#title { 
} 
#space-link { 
    font-family: 'Josefin Slab', serif; 
    font-size:2em; 
    color:#FFF; 
    text-align:center; /* horizontal center */ 
    line-height:240px; /* vertical center */ 
}

您還可以使用display:table規則來做到這一點，這將是更好的文本跨越多行的情況：http://jsfiddle.net/yXUdN/1/

.space-button { 
    ... 
    display:table; 
} 
#title { 
    display:table-row; 
} 
#space-link { 
    ... 
    vertical-align:middle; 
    text-align:center; 
    display:table-cell; 
}

此外，您不應該有多個具有相同ID的元素。改用類。

來源

2012-12-17 22:14:06 Shmiddty

很酷。看起來有點黑客，但它的工作。是的，我只是把代碼扔在一起，看看我想要什麼顏色，我通常會使用類。順便說一句，第二個不垂直居中。我喜歡第一種最適合此應用的方法。謝謝！ –

要垂直居中，可以在'table-cell'上使用'vertical-align：middle;'; – Shmiddty

您可以創建三個元素的包裝，並應用以下css來它

.wrapper { 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    margin-left: -408px; /* half of the total width of the three elements (272 * 3)/2 */ 
    margin-top: -136px; /* half of the height of one of the elments 272/2 */ 
}

來源

2012-12-17 22:15:56

如何將這些重疊元素居中？

回答

相關問題