CSS3 : div에서 텍스트를 세로로 정렬하는 방법은 무엇입니까?

나는 사용자 정의 글꼴로 div를 가지고 있으며 텍스트가 내부에있는 div와 동일한 높이를 갖도록하려고합니다.CSS3 : div에서 텍스트를 세로로 정렬하는 방법은 무엇입니까?

저는 div없이 텍스트의 수직 정렬을 무시할 수있는 방법을 찾고자했습니다. 이 목적을 위해 텍스트 들여 쓰기 방법과 같은 것이 있었으면합니다.

Here's a simple JsFiddle with my example.는

<!DOCTYPE html> 
<html> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'> 
<style> 
.texto { 
    background-color: #000; 
    height: 24px; 
    font-family: 'Lekton', sans-serif; 
    color:white; 
    font-size: 24px; 
} 
</style> 
</head> 
<body> 
    <div class="texto">Test</div> 
</body> 
</html>

출처

2015-01-09 Alejandro Gorgal

line-height CSS 속성을 사용

line-height : 24px;

출처

2015-01-09 19:30:15 potashin

가 포함 DIV의 높이를 측정하는 속성 값와 라인 높이 추가

<style> 
 
    .texto { 
 
     background-color: #000; 
 
     height: 24px; 
 
     font-family: 'Lekton', sans-serif; 
 
     color: white; 
 
     font-size: 24px; 
 
     line-height: 24px; /* This line solves your problem */ 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <div class="texto">Test</div> 
 
</body>

출처

2015-01-09 19:31:24

CSS3 : div에서 텍스트를 세로로 정렬하는 방법은 무엇입니까?

답변

관련 문제