Div不会在页脚中垂直居中

Question

我想建立我的页脚，但是不能一辈子让它做我想做的事情。 我想做的是 具有页脚，在（垂直）中心具有div，然后在左侧具有一些导航链接，在中间具有徽标，在右边具有日期。 我的主要问题是我无法将div定位到（垂直）居中位置，而我也无法将徽标定位到（水平）居中的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

这里有一些小提琴可能对您有用：

https://jsfiddle.net/9tcxnocb/7/

 .Fcontainer { background: grey; padding-left: 15px; padding-right: 15px; } .row { display: flex; background: orange; } #date { flex: 1; position: relative; } #date > p { position: absolute; top: 50%; right: 40px; font-size: 12px; margin-top: -12px; } ul.footmenu { flex: 2; list-style: none; margin-right: -40px; font-size: 12px; } .logo { flex: 1; margin: auto; } 

 <div id="footer"> <div id="top"></div> <div class="Fcontainer"> <div class="row"> <ul class="footmenu"> <li>Home</li> <li>Products</li> <li>Our Brands</li> <li>Contact Us</li> </ul> <div class="logo"> <img src="http://heyba.by/wp-content/uploads/2014/01/CSS3-badge-logo-big.png" height="60"> </div> <div id="date"> <p> <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> </p> </div> </div> </div> </div> 

也看看这个 。

并且正如已经建议的flexbox指南 。

编辑：出于示例目的，我已经编辑了代码并添加了实际图像。 希望您能掌握要点，并可以对其进行微调。

Answer 2

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

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

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

 .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> 

Answer 3

在Css中，使用Inspect工具并根据需要移动类。不要将边距初始化为auto，而不必像通过check那样输入像素
方法

Answer 4

尝试这个。

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

Answer 5

最明智的决定是

<style>
#footer{
  background-image: url(logo.jpg);
  background-repeat: no-repeat;
  background-position: center;
}
</style>

<div id="footer">

</div >

否则，您应该这样做：

.logo{
position: absolute;
left: 50%;
top: 50px;/*according to your center position*/
width: 300px;
margin-left: -150px;
}