텍스트를 중간에 세로로 정렬하고 divs를 서로 나란히 배치하십시오.

Question

텍스트를 그림과 수직으로 정렬하고 블록과 같은 모든 내용을 인라인으로 배치하고 싶습니다. 나는 그것을 달성하기 위해 고정 위치와 마진 탑을 사용 해왔다. 그러나 그것은 매우 나쁜 방법이다. 나는 더 좋은 방법이 있어야한다고 생각한다.

jsFiddle이 아래에 있기 때문에 여기 내 비슷한 코드가있는 유사한 사이트가 있습니다.

http://www.cssdesk.com/muEnL

Answer 1

설정 자식 div의 세포로 표시합니다. 그런 다음 수직 정렬 속성을 사용하십시오.

http://www.cssdesk.com/zCGrb

BTW

.user-container div { display: table-cell; padding: 5px; vertical-align: middle; } 

쿨 사이트

. 나는 그것이 당신이 갈 때 CSS 변화를 보여주는 것을 좋아한다.

Answer 2

다음을 시도해보십시오.

.image { 
    float:left; 
    line-height: 30px; 
} 

.name { 
    float: left; 
    line-height: 30px; 
} 

.logout { 
    clear: both; 
} 

Answer 3

이 내가 늘어나는만큼, 당신이 원하는 일을해야합니다 : 같은 라인 (물론, 조정할 수 있습니다) 아래에 나타나는 로그 아웃 수직으로 중심에이 함께 이미지와 이름을 갖게됩니다 말할 수있다. div에서 모든 것을 감싸지 않는 한, 이미지와 텍스트/링크는 인라인으로 유지됩니다. 이미지 스타일로, 같은 :

.user-container img { 
    vertical-align: middle 
} 

또 다른 옵션을,이 CSS를 사용하도록 원래의 HTML을한다 사용 :

<div class="user-container"> 
    <img src="http://www.gravatar.com/avatar/ec39c767ba245c2434ad2c31a3c481e5?s=128&d=identicon&r=PG" width="33" height="33"/> 

    <a href="#">John Doe</a> 

    <a href="#">Logout</a> 
</div> 

그래서 당신은 "중간 수직 정렬"을 추가 할 필요가

.user-container div { 
    display: inline; 
} 

.image img { 
    vertical-align: middle; 
}