Question

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

代码：

JSValue

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

也使用bootstrap 3.3.6。

Answer 1

你的意思是this fiddle？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将文字LI设为不同的班级，然后应用vertical-align: 50px。

＆＃13;

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

＆＃13;

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

＆＃13;

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

指定垂直文本高度

3 个答案: