Question

我在页脚标签中将页脚的内容垂直居中时遇到麻烦。我尝试设置页脚内容margin-top。显示，定位问题仍然存在。我不确定自己做错了什么。如果有人可以帮助我，我将不胜感激。谢谢！

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

页脚内容居中

1 个答案: