javascript - Centering Footer Content

Question

I'm having trouble centering vertically the contents of my footer in the footer tag. I've tried setting the footer content margin-top. Display, Position the issue persists. I'm not sure what I've been doing wrong. If anyone could help me I would greatly appreciate it. Thanks!

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>

标签： javascripthtmlcss

Answer 1

我不知道这是不是你的意思。但是，如果您想将项目居中垂直居中，您可以在 .footercontent中更改align-items: flex-start为align-items: center