탐색 높이 및 패딩

포토샵 메뉴를 만들었지 만 CSS로 변환하는 데 문제가 있습니다. 문제는 때로는 멀티 라인을 사용하지 않는다는 것입니다! 누군가 도움을 청할 수 있다면!탐색 높이 및 패딩

.training_nav { 
    float: right; 
} 
.training_nav li { 
    float: left; 
} 
.training_nav li.finances { 
    background: url(img/finances_icon.png) center 35px no-repeat; 
} 
.training_nav li a { 
    text-decoration: none; 
    color: #818181; 
    display: block; 
    font-size: 15px; 
    width: 140px; 
    height: 40px; 
    padding-top: 90px; 
    text-align: center; 
    text-transform: uppercase; 
} 
.training_nav li a:hover { 
    background: rgba(255, 0, 0, 0.2); 
}

http://jsfiddle.net/NeqYa/1/

많은 감사 : 여기 enter image description here

내 CSS입니다!

출처

2013-08-15 jhon

포스트뿐만 아니라 메뉴의 HTML. – Chad

현재 사용중인 CSS로 무엇이 제작되고 있는지 알면 도움이 될 것입니다. jsFiddle에 이미지 나 링크를 올리시겠습니까? – Brian

안녕 얘들 아, 여기는 js 피들 http://jsfiddle.net/NeqYa/1/ – jhon

CSS 등록 정보 display:table-cell을 사용하면 vertical-align 문제를 진정시키는 데 도움이됩니다. 여기에 업데이트 된 바이올린는 다음과 같습니다

http://jsfiddle.net/NeqYa/3/

여기에 작동 만든 CSS의 :

.training_nav li a { 
    text-decoration: none; 
    color: #818181; 
    font-size: 15px; 
    width: 140px; 
    height: 40px; 
    padding-top: 90px; 
    text-align: center; 
    display:table-cell; 
    vertical-align:middle; 
    text-transform: uppercase; 
}

출처

2013-08-15 15:38:17

고맙습니다! 그러나 내 그림과 같이 2 줄의 텍스트를 올릴 수있는 방법이 있습니까? 한 줄 요소를 중심으로? 고마워요! – jhon

내가 게시 한 바이올린을 보셨습니까? 이것은 정확히 내가 한 일입니다 ... –

죄송합니다. SCSS 파일을 작성하는 데 실수를했습니다! Tim을 많이 고마워! – jhon

탐색 높이 및 패딩

답변

관련 문제