Question

如何实现以下目标（见图）？我希望我的列表元素位于中间，到目前为止，我尝试的是与徽标（或H1）在同一行上对齐。

我尝试将利润顶部应用于li，但这根本不起作用。如果有人可以指导我出错的地方，我会很感激。

由于

enter image description here

我的尝试：

<html>
<header>
    <link rel="stylesheet" type="text/css" href="style2.css"></header>
<body>
    <div>
        <h1 class="logo">LogoHere</h1>

        <ul class="nav-menu">
            <li><a href="index.html">Action</a></li>
            <li><a href="about.html">Who we are</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Get in touch</a></li>
        </ul>
    </div>
</body>

CSS：

.logo {
    display: inline-block;
    position: relative;
    font-family: times, Times New Roman, times-roman, georgia, serif;
    font-size: 54px;
    line-height: 40px;
    letter-spacing: -5px;
    color: #444444;
    margin: 0 0 0 0;
    padding-top: 25px;
    padding-left: 25px;
    font-weight: 100;
}

.nav-menu {
    display: inline-block;
    list-style-type: none;
    font-size: 20px;
    padding: 0px;
    margin-top: 0px;
    padding-left: 50px;
    width: 55%;
    margin-left: 10px;
}

.nav-menu li {
    display: inline;
    margin: 0px 20px 20px 0px;
}

.nav-menu li a {
    text-decoration: none;
    color: grey;
}

li a:hover {color: #444444;}  /* mouse over link */

li a:active {
    color:white;
    text-decoration: underline;
}  /* selected link */

Answer 1

尝试使用：

.setMiddle
{
  vertical-align:middle;
}

它在框（div）中设置元素中间。你做了几个边距，填充。首先删除这些，然后应用.setMiddle。您需要将其应用于h1或ul。

编辑：将.setMiddle应用于h1和li它正在运行。 http://jsfiddle.net/6uuXC/1/

Answer 2

诀窍是有效地使用CSS line-height属性。这是一个fiddle，展示了如何实现这一目标。

<强> HTML

<select multiple>
  <option>One</option>
  <option>Two</option>
</select>

<强> CSS

header {
  line-height: 100px;
}
header span {
  padding: 0 0 0 20px;
}
.logo {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}

如何将无序列表设置在中间而不是内联（参见图像）？

2 个答案: