HTML 垂直对齐功能正在将内容移动到中间

Question

我知道这是超级初学者，但它已经困扰我几个小时了。先谢谢你了

我尝试重写代码，但没有成功

Answer 1

添加 .inner-head display:flex 将解决您的问题。请参阅下面的代码

.inner_header {
    display: flex;
    align-items: center;
}
.navigation {
/* float: right; */
margin-bottom:0;
display: block;
}
.navigation a {
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color:red;
}

<!DOCTYPE html>

<html>
<head>

<title>D&M Window Washing LLC</title>

<link rel="stylesheet" href="style.css">

</head>
<body>

<div class = "header">

<div class = "inner_header" >

<div class = "logo_container">

<h1>D&M<span>WindowWashing</span></h1>

</div>

<ul class = "navigation">

<a><li>Home</li></a>

<a><li>About</li></a>

<a><li>Reviews</li></a>

<a><li>Contact</li></a>

</ul>

</div>
</div>

</body>
</html>

Answer 2

所以我发现了你犯的错误。您拥有的 h1 元素是一个块元素，因此它占用了块空间，这就是您的菜单和标题徽标未并排对齐的原因。

HTML 垂直对齐功能正在将内容移动到中间

问题描述投票：0回答：2

2个回答

最新问题

HTML 垂直对齐功能正在将内容移动到中间

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2