javascript - 居中页脚内容

Question

我在将页脚标记中的页脚内容垂直居中时遇到问题。我试过设置页脚内容 margin-top。显示、定位问题依旧。我不确定我做错了什么。如果有人可以帮助我，我将不胜感激。谢谢!

Example of Issue on my Index.html

Update what I want it to look like

footer {
    background-repeat: no-repeat;
    background-color: #1F1E1E; 
    height: 50%;
    font-family: 'Open Sans', sans-serif;
}

.footercontent {
    display: flex;
    vertical-align: center;
    justify-content: center;
    align-items: flex-start;
}

.footerlogo {
    font-size: 15px;
}

.footerlogo img{
    height: 70px;
}

footer img{
    height: 60px;
}

footer a {
    color: white;
}

footer a:hover {
    color: #8FBAFF;
}

footer ul {
    color: white;
    text-align: left;
}


.caption {
    margin-top: 10px;
}

.space {
    margin-top: 30px;
}

.bold {
    font-size: 15px;
    font-weight: bold;
    line-height: 35px;
}

<footer class="footer">
  <div class="footercontent">

    <div class="footerlogo col-md-3 footernone">
      <img src="img/motivel.png">
    <div class="space">
      <p><a href="">phone#</a></p>
      <p><a href="">emailadress</a> </p>
    </div>
    </div>
  
    <div class="col-md-2 footerm">
        <ul class="bold">Explore</ul>
        <ul><a>Home</a></ul>
        <ul><a>About</a></ul>
        <ul><a>Services</a></ul>
        <ul><a>Contact</a></ul>
    </div>

<!--
    <div class="col-md-2 footernone">
        <ul class="bold">Follow</ul>
        <ul><a>Facebook</a></ul>
        <ul><a>Instagram</a></ul>
        <ul><a>Twitter</a></ul>
        <ul><a>Behance</a></ul>
    </div>
-->
    <div class="col-md-2 footernone">
        <ul class="bold">Legal</ul>
        <ul><a>Terms</a></ul>
        <ul><a>Privacy</a></ul>
    </div>
  </div>
</footer>

Answer 1

不知道你是不是这个意思。但是如果你想让元素垂直居中，你可以在 .footercontent 中将 align-items: flex-start 更改为 align-items: center