HTML CSS : 한 줄에 세로로 요소 정렬

인사말, 사용자 프로필 사진의 썸네일 (항상 고정 크기 - 30x30) 및 로그 아웃 링크가 표시된 사용자 로그인 헤더가 있습니다. 각 텍스트와 사진 사이에는 세로 구분 기호가 있습니다. 여기 HTML CSS : 한 줄에 세로로 요소 정렬

<span>Hello [username]</span> 
<span class="divider"></span> 
<img src="/photo.jpg" /> 
<span class="divider"></span> 
<a href="/logout">Logout</a>

내가가는 오전 결과입니다

Desired result

..하지만 사진의 높이가 다른 모든 요소 '아래로'내가이 얻을 밀어 :

을 Actual result

어떻게 수직으로 정렬합니까? 각 요소에 대해 여백/패딩을 하드 코딩하지 않고이를 수행 할 수있는 방법이 있습니까?

출처

2012-03-04 Harper

Wrrite vertical-align:middle에 대한; : 예 사용 {중간 수직 정렬} 또는 vertical-align:top; 다음과 같이 쓰기 :

img, span , a{ 
    vertical-align:middle 
}

확인이 http://jsfiddle.net/bB9vV/

출처

2012-03-04 05:47:23 sandeep

정확하게 이해한다면 CSS를 사용하여 구분선의 선 높이를 변경하고 싶을 것입니다. 선 높이에 이미지 높이와 같은 값을 지정하십시오. 그러면 텍스트를 가운데에 맞춰야합니다.

.divider{ 
line-height:30px; 
}

편집 당신은 또한 당신의 이미지를 정렬해야 할 수도 있습니다. 이미지 여기

더 많은 정보 align image vertically

출처

2012-03-04 05:39:14 TryHarder

<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
img, .divider{float:left;} 
.up{margin-bottom:15px; float:left;} 
</style> 
</head> 
<body> 
<span class='up'>Hello [username]</span> 
<span class="divider"></span> 
<img src="/photo.jpg" /> 
<span class="divider"></span> 
<a class='up' href="/logout">Logout</a> 
</body> 
</html>

출처

2012-03-04 05:41:40

HTML CSS : 한 줄에 세로로 요소 정렬

답변

관련 문제