CSS가 요소를 수직으로 정렬 할 수 없습니다.

다른 인라인 요소와 정렬되도록 더 작은 (위 첨자) 인라인 요소를 가져올 수 없습니다.CSS가 요소를 수직으로 정렬 할 수 없습니다.

기본적으로 em 요소 (단어 'USD'포함)는 인라인 텍스트 (단어 ABC 포함)와 정렬되어야하므로 단어의 상단이 모두 같은 줄에 있어야합니다.

내 코드는 아래 나와 있습니다. 35px로 줄 높이를 설정 했는데도 USD가 반으로 줄었습니다.

어떤 아이디어가 잘못 되었습니까? .plan-types-pricing em의 라인 높이를 높이 요구한다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
.plan-types-pricing 
{ 
    font-size: 35px; 
    line-height: 35px; 
} 

.plan-types-pricing strong 
{ 
    display: block; 
} 

.plan-types-pricing em 
{ 
    font-size:12px; 
    vertical-align: top; 
    line-height: 35px; 
} 

.plan-types-pricing small 
{ 
    font-size: 12px; 
    vertical-align: baseline; 
} 

</style> 
</head> 
<body> 
    <span class="plan-types-pricing"> 
     <strong>Starting at</strong> 
     <em>USD</em> 
     ABC 
     <small>/month</small> 
    </span> 
</body> 
</html>

출처

2012-05-03 g18c

제발 할 수 있겠습니까? – RSM

line-height : 50px; 안에 ... –

감사

크리스 - 폰트 크기 (35 - 12 = 23) 따라서 23px에 em의 line-height 설정 .

.plan-types-pricing em 
{ 
    line-height: 23px; 
    font-size: 12px; 
    vertical-align: top; 
}

출처

2012-05-03 11:03:15 GuZzie

CSS가 요소를 수직으로 정렬 할 수 없습니다.

답변

관련 문제