Question

我有一个菜单和一个CSS，如下所示，也可以在http://codepen.io/Sofian777/pen/PqeyQa

上玩

我需要垂直对齐菜单项并尝试使用vertical-align：中间和不同的显示：li和a上的设置（因为它在线工作于内联元素），但是我无法得到它工作。

有人知道如何实现这个目标吗？

编辑：这只是一个我认为已经足够的简化场景，但它不是，所以这是我的完整场景：http://codepen.io/Sofian777/pen/NqMOom（请参阅我对GolezTrol答案的评论中的简短描述）

<div id="menu"> 
      <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Categories</a></li>
            <li><a href="#">Contact</a></li>
      </ul>
</div> 

#menu {background: CornflowerBlue; 
  width: 100%;}

#menu ul {
    list-style-type: none; 
    text-align: center;
    height: 50px;
} 

#menu ul li {
    display: inline; 
    text-align: center;
}

#menu ul li a {
    text-decoration: none;
    display: inline-block; 
    width: 200px; 
    height: 100%;
    background: RoyalBlue;
    vertical-align: middle;
}

Answer 1

主要的变化是将线条高度设置为元素的高度，因此在这种情况下为50px。

此外，您可以将某些属性移动到链接。通过这样做，ul和li大小与链接，您不需要复制这些属性：

#menu {
  background: CornflowerBlue;
}
#menu ul {
  list-style-type: none;
  text-align: center;
}
#menu ul li {
  display: inline-block;
}
#menu ul li a {
  text-decoration: none;
  display: inline-block;
  width: 200px;
  background: RoyalBlue;
  line-height: 50px;
}

<div id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Answer 2

我们可以使用for a in parsed.xpath("//c:Task[@name='Parameter Estimation']/ParameterGroup[@name='FitItem']", namespaces=NSMAP): print a.attrib['name']来帮助对齐。

:before

   html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    font: inherit;
    vertical-align:baseline;
    background:transparent;
}


html {font-size:62.5%}
body {font-size: 16px; max-width: 1000px; margin: auto; line-height: 1.618;}
#menu {background: CornflowerBlue; 
  position: relative; 
  width: 100%; 
  padding-bottom: 5.6%; /* defining our 1000px : 56px ratio of the menubar */;}

#menu ul {
    position: absolute; right: 0; left: 0; top: 0; bottom: 0; /* This additional container is needed to not add the content to the padding-trick for our aspect ratio. */
    list-style-type: none; 
    text-align: center;
} 

#menu ul li {
    position: relative;
    display: inline; 
    text-align: center;
}

#menu ul li a {
    text-decoration: none;
    display: inline-block; 
    width: 20%; 
    height: 100%;
    background: RoyalBlue;
}
#menu ul li a:before{
    height: 100%;
width: 1px;
display: inline-block;
content: '';
vertical-align: middle;
}

Answer 3

使用line-height：

#menu {background: CornflowerBlue; 
  width: 100%;}

#menu ul {
    list-style-type: none; 
    text-align: center;
    height: 50px;
} 

#menu ul li {
    display: inline-block; 
    text-align: center;
}

#menu ul li a {
    text-decoration: none;
    display:block; 
    width: 200px; 
    background: RoyalBlue;
    line-height: 50px;
}

演示：JSFiddle

在可变高度的菜单中垂直居中链接

3 个答案: