gpt4 book ai didi

html - 如何在 CSS 中垂直对齐两个导航栏元素,然后是图像,然后是两个导航栏元素?

转载 作者:太空宇宙 更新时间:2023-11-03 20:27:03 25 4
gpt4 key购买 nike

我想把我网站的主屏幕做成这样:

enter image description here

我在 HTML 中有以下代码:

<body>
<li class="aboutme"><a href="#">Over Mij</a></li>
<li class="resume"><a href="#">Resumé</a></li>
<img class="home_cartoon" src="cartoon.png">
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="contact"><a href="#">Contact</a></li>
</body>

我不知道我必须如何处理我的 CSS 才能让它像我添加的图像一样,有人可以帮助我吗?

最佳答案

首先,您必须在 li 元素周围使用 ul 容器,并将图像放入 li 中以获得有效的 HTML。制作所有 li 的内联 block 并对其应用 vertical-align: middle;:

li {
display: inline-block;
vertical-align: middle;
}
<body>
<ul>
<li class="aboutme"><a href="#">Over Mij</a></li>
<li class="resume"><a href="#">Resumé</a></li>
<li><img class="home_cartoon" src="https://placehold.it/120x200"></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</body>

关于html - 如何在 CSS 中垂直对齐两个导航栏元素,然后是图像,然后是两个导航栏元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51538655/

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