꼬투리에 메뉴 글자 맞추기

나는 li의 아래쪽 (녹색 테두리로 표시)에 텍스트를 정렬하려하지만 "vertical-align : bottom"은 작동하지 않고 "position : absolute; bottom : 0 "텍스트가 리 외부에 쌓이게 만든다. 내가 도대체 뭘 잘못하고있는 겁니까?꼬투리에 메뉴 글자 맞추기

Jsfiddle : http://jsfiddle.net/eternal_noob/dog42xeh/이

HTML :

<div class="head"> 
<div class="logo"> <a href="/" title="Back to homepage"> 
    <img src="http://www.dierenasielamsterdam.nl/files/homepage/Poes-virtueel-asiel.jpg"> 
    </a> 

</div> 
<div class="nav"> 
    <div class="icon-top"> <span>(999)999-9999/(999)999-9999</span> 

    </div> 
    <div class="menu"> 
     <ul class="topmenu"> 
      <li><a href="a.php">Abyssinian</a> 
      </li> 
      <li><a href="b.php">Munchkin</a> 
      </li> 
      <li><a href="c.php">Persian</a> 
      </li> 
      <li><a href="d.php">Siamese</a> 
      </li> 
      <li><a href="e.php">About</a> 
      </li> 
     </ul> 
    </div> 
</div>

CSS :

.head { 
    text-align: center; 
    height: 150px 
} 
    .head:before { 
    content:''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em 
} 
.logo { 
    display: inline-block; 
    vertical-align: middle; 
    height: 100px; 
    width: 350px; 
} 
.nav { 
    display: inline-block; 
    vertical-align: middle; 
    height: 100px; 
    width: 600px; 
} 
.icon-top { 
    line-height:29px; 
    padding-right:20px; 
    color:#333; 
    font-size:15px; 
    text-align:right; 
} 
.menu { 
    position: relative; 
    text-align:right; 
} 
.menu-header { 
    height:50px; 
} 
.topmenu { 
    display: inline-block; 
    height:65px; 
    margin:0; 
    padding:0; 
    font-size: 20px; 
} 
.topmenu li { 
    display: inline-block; 
    height:100%; 
    list-style:none; 
    margin-left:20px; 
    border: solid 1px green; 
} 
.topmenu li a { 
    color: #000000; 
    vertical-align:text-bottom; 
} 
.topmenu li a:hover { 
    color:#b574d4; 
}

출처

2014-08-28 eternal_noob

이 또한 작동합니다 http://jsfiddle.net/ctwheels/dog42xeh/3/를 – ctwheels

당신은이 같은 line-height을 추가 할 수 있습니다

,228,311,

fiddle

또 다른 해결책은 table-cell을 사용하는 것입니다

.menu { 
    position: relative; 
    display: table;/*Add display table*/ 
    margin: 0 auto;/*Add margin 0 auto to align to the middle of the page*/ 
}  

.topmenu { 
    display: table-row;/*Add display table-row*/ 
    height:65px; 
    margin:0; 
    padding:0; 
    font-size: 20px; 
} 


.topmenu li { 
    display: table-cell;/*Add display table-cell*/ 
    /*height:100%; Remove height*/ 
    list-style:none; 
    margin-left:20px; 
    border: solid 1px green; 
    vertical-align: bottom;/*Add vertical-align bottom*/ 
}

fiddle

여기를보세요 : Understanding vertical-align, or "How (Not) To Vertically Center Content"

출처

2014-08-28 18:04:06

두 번째 솔루션에 정확한 바이올린을 추가했습니다. –

첫 번째 해결책은 트릭을했습니다! 다른 예를 가져 주셔서 감사합니다. 앞으로 사용할 수있을 것으로 확신합니다. 기존 템플릿을 변경하기 때문에 첫 번째 템플릿을 선호하므로 템플릿이 변경 될수록 템플릿이 더 좋아집니다. –

가 여기에 도움이 될 수 있습니다 수정합니다. 당신은 JS 두려워하지 않는 경우

.topmenu li a { 
    color: #000000; 
    /* vertical-align: bottom; */ 
    position: relative; 
    top: 46px; /* or.. top: 40px; */ 
}

fiddle

출처

2014-08-28 18:20:22

꼬투리에 메뉴 글자 맞추기

답변

관련 문제