指定垂直文本高度

Question

我正在使用無序列表構建水平菜單。 4項是鏈接，然後在中心有一張圖片。目前鏈接集中在圖像的中間，但我寧願文本垂直對齊低於中間。圖片高度爲140px，我希望文字爲50px。我試過玩垂直對齊和線條高度，但沒有喜悅。填充不起作用。我相信這是顯而易見的，我只是想念它。任何幫助，將不勝感激。

代碼：

.menu { 
 
    text-align: center; 
 
} 
 
.menu ul { 
 
    display: inline-table; 
 
} 
 
.menu ul li { 
 
    display: inline; 
 
    line-height: 0px; 
 
} 
 
.menu .link { 
 
    padding: 15px; 
 
} 
 
.menu a { 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    font-weight: 400; 
 
    color: #131313; 
 
} 
 
.menu a:hover { 
 
    color: #330000; 
 
}

<div class="container"> 
 
    <div class="row menu"> 
 
    <ul> 
 
     <li class="link"><a href="menu.html">MENU</a> 
 
     </li> 
 
     <li class="link"><a href="about.html">ABOUT</a> 
 
     </li> 
 
     <li class="link"> 
 
     <a href="index.html"> 
 
      <img class="center logo" src="https://placehold.it/140x140" /> 
 
     </a> 
 
     </li> 
 
     <li class="link"><a href="/blog">BLOG</a> 
 
     </li> 
 
     <li class="link"><a href="contact.html">CONTACT</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

使用引導3.3.6爲好。

Answer 1

你的意思是像this fiddle？

.menu { text-align:center; } 
 
.menu ul { display:inline-table;} 
 
.menu ul li {display:inline; line-height:0px;} 
 
.menu .link { 
 
\t padding: 15px; 
 
} 
 
img{ 
 
    width: auto; 
 
    height: 140px; 
 
    vertical-align: -50px; 
 
} 
 
.menu a { 
 
\t text-decoration: none; 
 
\t font-size: 17px; 
 
\t font-weight: 400; 
 
\t color: #131313; 
 
} 
 
.menu a:hover { 
 
\t color: #330000; 
 
}

<div class="container"> 
 
<div class="row menu"> 
 
    <ul> 
 
     <li class="link"><a href="menu.html">MENU</a></li> 
 
     <li class="link"><a href="about.html">ABOUT</a></li> 
 
     <li class="link"><a href="index.html"><img class="center logo" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300"/></a></li> 
 
     <li class="link"><a href="/blog">BLOG</a></li> 
 
     <li class="link"><a href="contact.html">CONTACT</a></li> 
 
    </ul> 
 
</div>

Answer 2

給文字LI的不同的類，然後再應用vertical-align: 50px。

.menu { 
 
    text-align: center; 
 
} 
 
.menu ul { 
 
    display: inline-table; 
 
} 
 
.menu ul li { 
 
    display: inline; 
 
    line-height: 0px; 
 
} 
 
.menu .link { 
 
    padding: 15px; 
 
} 
 
.menu .link.align { 
 
    vertical-align: 50px; 
 
} 
 
.menu a { 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    font-weight: 400; 
 
    color: #131313; 
 
} 
 
.menu a:hover { 
 
    color: #330000; 
 
}

<div class="container"> 
 
    <div class="row menu"> 
 
    <ul> 
 
     <li class="link align"><a href="menu.html">MENU</a> 
 
     </li> 
 
     <li class="link align"><a href="about.html">ABOUT</a> 
 
     </li> 
 
     <li class="link"> 
 
     <a href="index.html"> 
 
      <img class="center logo" src="https://placehold.it/140x140" /> 
 
     </a> 
 
     </li> 
 
     <li class="link align"><a href="/blog">BLOG</a> 
 
     </li> 
 
     <li class="link align"><a href="contact.html">CONTACT</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 3

不知道，如果你想要的文字是vertical-align: top或vertical-align: middle但你這個codepen取悅你可以調整它！

我製作了li的內聯塊，使它們可以通過vertical-align屬性進行調整，並且在導航中仍然是水平的。

我給了背景一些顏色，以便股票圖像不會混入儘可能多，你會看到對齊。

HTML：

<div class="container"> 
<div class="row menu"> 
    <ul> 
    <li class="link"><a href="menu.html">MENU</a></li> 
    <li class="link"><a href="about.html">ABOUT</a></li> 
    <li class="link"><a href="index.html"><img class="center logo" src="http://lorempixel.com/140/200/"/></a></li> 
    <li class="link"><a href="/blog">BLOG</a></li> 
    <li class="link"><a href="contact.html">CONTACT</a></li> 
    </ul> 
</div> 

CSS：

body { 
    background: #BBB; 
} 

.menu { 
    text-align:center; 
} 
.menu ul { 
    display:inline-table; 
} 
.menu ul li { 
    display: inline-block; 
    vertical-align: middle; 
} 

.menu .link { 
    padding: 1em; 
} 

.menu a { 
    text-decoration: none; 
    font-size: 3.125em; 
    color: #131313; 
} 

.menu a:hover { 
    color: #330000; 
}