如何在絕對定位的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上垂直對齊文本

回答

相關問題