gpt4 book ai didi

html - 垂直居中两个 float 元素

转载 作者:行者123 更新时间:2023-11-28 12:28:36 25 4
gpt4 key购买 nike

我意识到垂直居中是一个经常出现在这里和其他网站上的话题,但我对 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 标题和导航列表行中心彼此垂直对齐。目前它看起来像这样......

element aligment

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

我已经阅读了很多东西,但我不愿意在没有完全理解的情况下盲目地从互联网上复制代码。

最佳答案

试试行高。将此添加到您的 CSS 中的 ul

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

根据您的需要调整数字。

这里有一个关于不同垂直居中技术的小教程。我会继续补充这个。但它可能会向您说明元素如何对不同的样式使用react。

Codpen example on padding and line-height

关于html - 垂直居中两个 float 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18391603/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com