gpt4 book ai didi

html - 使用 CSS 垂直对齐各种对象/元素

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

我正在构建一个临时站点,我想将 Logo 和菜单项垂直对齐(居中),但无法成功。

这是我当前的 HTML 代码:

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>

<body>
<div class="header">
<a class="logo" href="/index.html"><img class="logo" src="/images/logo.png"></a>

<a class="menu" href="/whatever.html">Menu Item 1</a>
<a class="menu" href="/whatever.html">Menu Item 2</a>
<a class="menu" href="/whatever.html">Menu Item 3</a>
<a class="menu" href="/whatever.html">Menu Item 4</a>
</div>

</body>
</html>

这是我当前的 CSS 代码:

.header {
display: block;
}

.logo {
display: inline-block;
vertical-align: middle;
}

.menu {
display: inline-block;
vertical-align: middle;
}

为了简化,我删除了所有其他样式,例如颜色。

如有任何帮助,我们将不胜感激!

最佳答案

根据 w3:http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS level 2 没有垂直居中的属性。在 CSS 级别 3 中可能会有一个。但是即使在 CSS2 中,您也可以通过组合一些属性来垂直居中 block 。诀窍是指定外部 block 要格式化为表格单元格,因为表格单元格的内容可以垂直居中。

所以代码真的很简单

#container{
display: table-cell;
vertical-align: middle;
height: 200px;
}

这是一个演示 http://jsfiddle.net/4PJUr/

关于html - 使用 CSS 垂直对齐各种对象/元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20254766/

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