javascript - Div 不会在页脚中垂直居中

Question

我想设置我的页脚，但我一辈子都做不到我想做的事。我想做的是；有页脚，在(垂直)中心有一个 div，然后在左边有一些导航链接，中间有一个标志，右边有日期。我的主要问题是我无法将 div 置于(垂直)居中，并且我无法将 Logo 置于 div 中间的(水平)居中。

<div id="footer">
            <div id="top"></div>
                <div class="Fcontainer">
                    <div class="row">
                        <div id="date">
                            <script type="text/javascript">
                                <!--
                                var months = new Array(
                                "January", "February", "March", "April",
                                "May", "June", "July", "August",                         "September",
                                "October", "November", "December");
                                var currentTime = new Date();
                                var month = currentTime.getMonth();
                                var day = currentTime.getDate();
                                var year = currentTime.getFullYear();
                                document.write(day + " " + months[month]);
                                //-->
                            </script>
                            </div>

                            <div class="logo">
                                <img src="logo.jpg">
                            </div>

                            <ul class="footmenu">
                                <li>Home</li>
                                <li>Products</li>
                                <li>Our Brands</li>
                                <li>Contact Us</li>
                            </ul>


                    </div>
                </div>
            </div>

CSS

.Fcontainer {
    background:grey;
    padding-left:15px;
    padding-right:15px;
    margin-left:auto;
    margin-right:auto;
    vertical-align:middle;
}

.row {
    background:orange;
    vertical-align:middle;
}

#date {
    float:right;
}

ul.footmenu {
  margin: 0 auto;
  display: inline-block;
  list-style: none;

}

ul.footmenu li {
  float: left;

  padding-right: 8px;
}

ul.footmenu li a {
  display: block; 
  margin: 0 auto;
  display: inline-block;
  list-style: none;
}

.logo {
    margin-left: auto;
    margin-right:auto;
}

Answer 1

我希望这就是您正在寻找的描述。首先，删除 ID 为 date 的 div 上的 float: right 属性。

然后，将 text-align: center 放在 img 上，类为 logo。

最后，将margin-top: 125px放在ID为footer的div上。您可以修改此金额。这是一个代码片段。

.Fcontainer {
  background: grey;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}
.row {
  background: orange;
  vertical-align: middle;
}
ul.footmenu {
  margin: 0 auto;
  display: inline-block;
  list-style: none;
}
ul.footmenu li {
  float: left;
  padding-right: 8px;
}
ul.footmenu li a {
  display: block;
  margin: 0 auto;
  display: inline-block;
  list-style: none;
}
.logo {
  text-align: center;
}
#footer {
  margin-top: 125px;
}

<div id="footer">
  <div id="top"></div>
  <div class="Fcontainer">
    <div class="row">
      <div id="date">
      </div>

      <div class="logo">
        <img src="logo.jpg">
      </div>

      <ul class="footmenu">
        <li>Home</li>
        <li>Products</li>
        <li>Our Brands</li>
        <li>Contact Us</li>
      </ul>


    </div>
  </div>
</div>