Html 使用CSS垂直对齐各种对象/项目_Html_Css

Html 使用CSS垂直对齐各种对象/项目

html css

Html 使用CSS垂直对齐各种对象/项目,html,css,Html,Css,我正在建立一个临时网站，我想对齐（中间）的标志和菜单项垂直，但我无法取得成功以下是我当前的HTML代码： <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="header"> <a class="logo" href="/index.html"><img

我正在建立一个临时网站，我想对齐（中间）的标志和菜单项垂直，但我无法取得成功

以下是我当前的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>

我已经删除了所有其他样式，如颜色，以简化

任何帮助都将不胜感激

根据w3：

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

所以代码非常简单

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

这是一个演示

所以你想让徽标垂直对齐？像这样？@Markasoftware是的，我想让所有东西都与其他东西垂直对齐，不管高度有多高。@j08691如果我使用position:absolute，那么整个页面都会被占据，我看不到其他内容。那么也许你应该发布一个代码示例，它更能代表你的实际内容以及你希望最终产品的外观。我无法让它与多个项目垂直对齐我不明白你的意思。你能给出一些代码来显示你的要求吗？我希望上面代码中的徽标和菜单项彼此垂直对齐。徽标比菜单文本大，所以它们需要在标志的中间。我喜欢你解释的方式，我认为这应该是讽刺。我已经放弃了这条线索。

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