如何更正不在同一级别的div

Question

如何将这两个div并排放置。我使用了内联块，但右边的块比左边的块低。我使用了两次相同的方法，在这两种情况下都产生了相同的错误。

这是我的html:

<div class="MainHeader">
<div class="logo">
<a href="/index.html"><img class="Logo" src="/assets/img/Logo/Logo.png"/></a>
</div>
<div class="SPortal_header">
<div class="menu">
<ul>
<li><a>| Sign Out</a></li>
<li>| Academic Calendar</li>
<li>Master Schedule</li>
</ul>
</div>
</div>
<div class="name_wrapper">
<div class="student_icon">
<i class="fa fa-user fa-2x"></i>
</div>
<div class="student_name">
<h2>User's Name</h2>
</div>

</div>
</div>

这是我的CSS：

.Logo{
width: 270px;
height: 50px;

}
.MainHeader{
background-color: #5D0C1D;
width: 100%;
}
.SPortal_header, .logo{
display: inline-block; 
width: 48%;
padding: 10px;
height: 80px;
}

Answer 1

您需要vertical-align: middle;来对齐middle, side-by-side中的两个内联块div。我还删除了height: 80px;，因为两个div的内容高度不同

.Logo{
width: 270px;
height: 50px;

}
.MainHeader{
background-color: #5D0C1D;
width: 100%;
}
.SPortal_header, .logo{
display: inline-block;
vertical-align: middle;
width: 38%;
padding: 10px;
}

<div class="MainHeader">
<div class="logo">
<a href="/index.html"><img class="Logo" src="https://i.picsum.photos/id/389/536/354.jpg?hmac=mw2HAbrZOUQP05D91hdDGU3_1rhX_Hl8a2At_atV3PA"/></a>
</div>
<div class="SPortal_header">
<div class="menu">
<ul>
<li><a>| Sign Out</a></li>
<li>| Academic Calendar</li>
<li>Master Schedule</li>
</ul>
</div>
</div>
<div class="name_wrapper">
<div class="student_icon">
<i class="fa fa-user fa-2x"></i>
</div>
<div class="student_name">
<h2>User's Name</h2>
</div>

</div>
</div>