CSS 수직으로 네비게이션 바

나는 다음과 같은 링크에서 이미지처럼 보이는 HTML + CSS에서 탐색 모음을 만들려고 해요에 대한 부동의 텍스트를 중심으로 회색으로 된 왼쪽 부유 사각형/div의 텍스트 및 오른쪽 부유 사각형/div의 작은 글꼴로 된 링크 목록이 빨간색으로 표시되며, 플로트를 제거하고 조정할 필요없이 세로로 가운데에 텍스트를 표시하고 싶습니다. 여백 - 왼쪽/여백 - 오른쪽 회색 및 빨간색 상자. 가능한가요, 그렇다면 어떻게 할 수 있습니까?CSS 수직으로 네비게이션 바

출처

2012-06-23 user1476783

당신이 지금까지 한 일을 공유한다면 큰 도움이 될 것입니다. –

[fiddle] (http://jsfiddle.net/bmHBX/1/) ...을 확인하십시오 :) –

div의 텍스트를 세로로 정렬하는 것은 상당히 어려워 보입니다.

트릭은 다음과 같습니다.

<div id="parent"> 
<p id="child"> text</p> 
</div>

지금 당신이 수직으로 다음과 같은 트릭을 수행하여 텍스트를 정렬 할 수 있습니다

는 다음과 같은 HTML을 가정 해 봅시다.

#parent{ 
    display: table; 
    .... 
} 

#child{ 
    display: talble-cell; 
    vertical-align: center; 
}

이렇게하면 다음과 같은 결과가 발생합니다. http://jsfiddle.net/RLchH/1/

출처

2012-06-23 13:47:45 Erik

빨간 용기의 높이를 알고 있다면 쉽게 볼 수 있습니다. HTML이 방법을 보내기

<div class="red"> 
    <a href="Home">Home</a> 
    <a href="...">...</a> 
    <a href="etc.">etc.</a> 
</div>

그리고 CSS 등 :

.red {line-height: 50px; vertical-align: middle; background: #f00; font-family: tahoma, sans-serif; text-align: center; font-size: 11px; font-weight: bold;} 
.red a {color: #fff; text-decoration: none;}

체크 아웃이 fiddle을! 희망이 도움이됩니다! :)

출처

2012-06-23 13:05:57

CSS 수직으로 네비게이션 바

답변

관련 문제