절대적으로 위치한 div 위에 텍스트를 수직으로 정렬하는 방법

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 위에 텍스트를 수직으로 정렬하는 방법

답변

관련 문제