用Flexbox对齐同一行的文本

Question

我一直在纠结如何对齐这两个项目。正如您在运行代码片段时所看到的，"Newsletter"比"Resources"稍微低一点。它们应该是垂直和水平对齐的，但由于某种原因，它们不在同一行。

* {
margin: 0;
padding: 0;
}

.footer {
width: 100%;
height: 150px;
background-color: #6D7B8D;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
}

<footer>
<div class="footer">
<div class="col">
<p class="coltitle">Resources</p>
<ul class="footer-links">
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
</ul>
</div>
<div class="col">
<p class="coltitle">Newletter</p>
<ul class="footer-links">
<li>
<form action="#" method="post">
<input type="email" name="email" placeholder="Subscribe" maxlength="80" required />
</form>
</li>
</ul>
</div>
</div>
</footer>

Answer 1

我刚刚删除了align-items: center并添加了margin-top到.col，这对你有用吗?

* {
margin: 0;
padding: 0;
}

.footer {
width: 100%;
height: 150px;
background-color: #6D7B8D;
display: flex;
justify-content: space-evenly;
flex-direction: row;
}
.col {
margin-top: 30px;
}

<footer>
<div class="footer">
<div class="col">
<p class="coltitle">Resources</p>
<ul class="footer-links">
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
</ul>
</div>
<div class="col">
<p class="coltitle">Newletter</p>
<ul class="footer-links">
<li>
<form action="#" method="post">
<input type="email" name="email" placeholder="Subscribe" maxlength="80" required />
</form>
</li>
</ul>
</div>
</div>
</footer>