Question

我意识到垂直居中是一个经常出现在这里和其他网站上的话题，但我还是HTML的新手，甚至在阅读了这个主题后我仍然感到困惑。

我尝试为网站制作一个简单的标题元素，其中包含导航链接的h1标题和导航ul。这是html：

<!doctype html> 
<html> 
<head>
   <title>Sample website</title> 
   <link href="css/homepage.css" rel="stylesheet" type="text/css">
</head>

<body>

    <header>
   <h1>Website Title Here</h1> 
    <ul>
    | <li><a href="#">Home</a></li> |
      <li><a href="./about/index.html">About me</a></li> |
      <li><a href="./contact/index.html">Contact me</a></li> |
      <li><a href="http://throughbenslens.co.uk/blog">My blog</a></li> |
      <li><a href="./portfolio/index.html">My portfolio</a></li> |
   </ul>
    </header>

    <hr class="hrstyle" style="clear:both;"/>

</body>
</html>

各自的CSS：

header{
    max-width: 1000px;
    margin:auto;
}

h1{
    font-family: Helvetica;
    float: left;
    padding:0;
}

ul{
    display: inline-block;
    float: right;   
    padding:0;
}

li {
    font-family: Helvetica;
    font-variant: small-caps;
    list-style-type: none;
    display: inline;
}

.hrstyle{
    max-width:1000px;
}

我正试图让h1标题和导航列表到行中心垂直对齐。目前它看起来像这样......

element aligment

导航元素出现在标题的顶部。

我已经阅读了很多内容，但我对于在没有完全理解它的情况下盲目地从互联网上复制代码犹豫不决。

Answer 1

试试line-height。将其添加到CSS中的ul

ul {
  ...
  line-height: 40px;
}

根据您的意愿调整数字。

这里有一些关于不同垂直居中技术的小教程。我会不断加入这个。但它可能会向您说明元素对不同样式的反应。

Codpen example on padding and line-height

Answer 2

对于你的ul添加：

ul{
  ...
  position:absolute;
  top:25px;
  right:0px;
}

绝对位置允许您从侧面控制元素的位置。所以从顶部推出一定数量，从右边推动0。这将产生你所描述的内容。

这是小提琴： http://jsfiddle.net/AnPkT/2/

使两个浮动元件彼此相对垂直居中

2 个答案: