指定垂直文本高度答案

【问题标题】：Specifying vertical text height指定垂直文本高度
【发布时间】：2016-02-25 00:05:56
【问题描述】：

我正在使用无序列表构建一个水平菜单。 4 个项目是链接，然后中间有一个图像。目前链接以图像的中间为中心，但我宁愿文本垂直对齐低于中间。图像高 140 像素，我希望文本为 50 像素。我试过玩垂直对齐和行高，但没有乐趣。填充不起作用。我确信这很明显，我只是想念它。任何帮助将不胜感激。

代码：

.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。

【问题讨论】：

标签： html css

【解决方案1】：

你的意思是this fiddle？

.menu { text-align:center; }
.menu ul { display:inline-table;}
.menu ul li {display:inline; line-height:0px;}
.menu .link {
	padding: 15px;
}
img{
  width: auto;
  height: 140px;
  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"><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>

【讨论】：

【解决方案2】：

给文本LI's 一个不同的类，然后应用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>

【讨论】：

【解决方案3】：

不确定您是否希望文本为vertical-align: top 或vertical-align: middle，但您可以使用codepen 随意调整它！

我制作了 li 的内联块，这使得它们可以通过垂直对齐属性进行调整，并且在您的导航中仍然是水平的。

我给背景添加了一些颜色，这样股票图像就不会融入太多，并且您可以看到对齐方式。

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;
}

【讨论】：