如何将这些重叠元素居中？

-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

如何将这些重叠元素居中？

回答

相关问题