두 개의 서로 다른 크기의 텍스트 요소의 수직 정렬

Question

로고와 탐색의 두 가지 요소가 있습니다. 로고는 48px이지만 탐색은 16px입니다. 내가 직면하고있는 도전 과제는 둘 다 세로로 정렬 한 다음 가로로 웹 페이지 콘텐츠와 정렬하는 것입니다. margin 이후

.header { 
    height: 10%; 
    width: 100%; 

    display: table; 
} 

.logo { 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
} 

.nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 

    display: table-cell; 
    vertical-align: middle; 
} 

.container { 
    width: 100%; 
    height: 90%; 
    display: table; 
} 

.wrapper { 
    height: 100%; 

    display: table-cell; 
    vertical-align: middle; 
} 

이 코드는 모두 수직으로 정렬되어 출력을 생산하지만 난 후 용기의 내용에 정렬하는 방법을 잘 모르겠어요, 내 CSS에서 다음

<div class="header"> 
    <div class="logo">LOGO</div> 
    <ul class="nav"> 
     <li>ABOUT</li> 
     <li>CONTACT</li> 
    </ul> 
</div> 

<div class="container"> 
    <div class="wrapper"> 
     CONTENT 
    </div> 
</div> 

컨테이너상의 높이는 auto입니다. 누군가가 나에게 위대한 것이 될 수있는 방향을 줄 수 있다면.

내 전반적인 목표는 로고와 탐색을 헤더 내에 세로로 정렬하는 것입니다. 예를 들어 내 콘텐츠의 크기는 590px이며 로고의 왼쪽 (왼쪽)과 오른쪽의 네비게이션을 정렬하십시오.

출력은

|logo|  |nav | 
|contentttttttttttt| 

감사

Answer 1

http://jsfiddle.net/tqBUb/

다음 코드는 완벽하게 수직으로 서로 다른 크기의 텍스트를 중심으로, 수평으로 두 요소의 총 결합 된 폭과 같아야합니다. 이게 니가 원하는거야? 어느 쪽이든 이것은 아마도 당신을위한 좋은 출발점 일 것입니다. 헤더 요소의 너비는 무엇이든 변경할 수 있으며 그에 따라 조정됩니다.

HTML

<header> 
    <div class="container"> 
     <div class="logo"> 
      <span>LOGO</span> 
     </div> 
     <nav class="main-nav"> 
      <ul> 
       <li>HOME</li> 
       <li>ABOUT</li> 
      </ul> 
     </nav> 
    </div> 
</header> 

CSS

header { 
    color: #fff; 
    width: 80%; 
    background: blue; 
} 

.container { 
    display: table; 
    background: red; 
    margin: 0 auto; 
} 

.logo { 
    display: table-cell; 
    vertical-align: middle; 
} 

.logo span { 
    font-size: 48px; 
    line-height: 1; 
} 

.main-nav { 
    display: table-cell; 
} 

.main-nav ul { 
    list-style-type: none; 
} 

.main-nav ul li { 
    display: inline-block; 
} 

---

|logo|_______|nav| 
|_____content____| 

가 590px에서이 형식을 달성하기 위해, 당신은 스크린 (590)의 폭 또는를위한 미디어 쿼리 중단이 필요합니다 적게. 그럼 ... 그냥 디스플레이를 변경하십시오 : 테이블; 표시 할 컨테이너 : block; 및 디스플레이 : 테이블 - 셀; 표시 할 div : 블록. 그런 다음 .logo div를 왼쪽으로 이동하고 .main-nav 오른쪽으로 이동하십시오.