0

我意识到垂直居中是一个经常出现在这里和其他网站上的话题，但我对 HTML 还是很陌生，即使在阅读了这个话题之后我仍然感到困惑。

我尝试为一个网站制作一个简单的标题元素，其中包含一个 h1 标题和一个用于导航链接的 nav 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 标题和导航列表垂直对齐。目前它看起来像这样......

元素对齐

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

我读过很多东西，但我很犹豫只是在没有完全理解的情况下盲目地从互联网上复制代码。

4

2 回答 2

0

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

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

根据您的意愿调整数字。

这是一个关于不同垂直居中技术的小教程。我会继续补充这一点。但它可能会为您说明元素如何对不同的样式做出反应。

padding和上的 Codpen 示例line-height

于 2013-08-22T22:13:21.737 回答
0

为你的 ul 添加这个：

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

绝对位置允许您从侧面控制元素的位置。所以从上往下推一定的量，从右边往上推0。这将产生您所描述的内容。

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

于 2013-08-23T00:21:28.040 回答