Question

我有一个包含宽度为30％的图像的div。还有一个绝对定位的div，其中包含一些文本。我能够使用text-align:center属性水平对齐文本。但是，我如何才能垂直对齐相同的文本，以便文本位于图片的中间。 vertical-align: middle似乎在这种情况下不起作用。 HTML和CSS如下：

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="image">
            <img src="http://goo.gl/hPGFvG"  />
        </div>
        <div class="text">
            <p>TEXT</p>
        </div>
    </div>
</body>
</html>

CSS

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
}

p {
    margin: 0;
}

img {
    display: block;
}

.container {
    position: relative;
    width: 30%;
    min-width: 320px;
}

.image {
}

    .image img {
        margin: 0 auto;
    }

.text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

Answer 1

如果您想调整一下，我认为最快的就是取出您的计算器并将的顶部属性设置为图像高度的一半。

例如：如果您的图片高度为300像素，则：

.text{
position : absolute;
top : -150px;
}

小心，你不能在任何地方使用vertical-align:middle，有很多关于此的链接，你应该检查一下：Centering in the Unknown。

祝你好运！

如何在绝对定位的div顶部垂直对齐文本

1 个答案: