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

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

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; 
}

来源

2014-02-16 user3316214

如果你喜欢扭捏的时候，我觉得最快的你是拿出你的计算器和设置顶部属性为，图片高度的一半为负值。

例如：如果你的图像具有300像素的高度，则：

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

要小心，不能使用vertical-align:middle无处不在，也有很多关于这个链接，你应该检查这一点：Centering in the Unknown 。

祝你好运！

来源

2014-02-16 15:15:11 astrodedl

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

回答

相关问题