Javascript Div不会垂直居中于页脚

我试图建立我的页脚，但我的生活不能让它做我想做的事。我想做的是；有脚注，有一个div在（垂直）中心，然后有一些导航链接在左边，一个标志在中间和日期在右边。我的主要问题是，我不能得到div（垂直）中心，我不能得到标志（水平）中心的div.< /p>

<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中，使用Inspect工具并根据需要移动类 不要将边距初始化为自动，而应通过检查来输入像素
方法试试这个

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

---

最明智的决定是

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

<div id="footer">

</div >

---

这里有一把可能适合你的小提琴：

.Fcontainer{
背景：灰色；
左侧填充：15px；
右侧填充：15px；
}
.行{
显示器：flex；
背景：橙色；
}
#日期{
弹性：1；
位置：相对位置；
}
#日期>p{
位置：绝对位置；
最高：50%；
右：40px；
字体大小：12px；
边缘顶部：-12px；
}
菜单{
弹性：2；
列表样式：无；
右边距：-40px；
字体大小：12px；
}
.标志{
弹性：1；
保证金：自动；
}

家
产品
我们的品牌
联系我们


var月=新数组(
“一月”、“二月”、“三月”、“四月”，
“五月”、“六月”、“七月”、“八月”、“九月”，
“十月”、“十一月”、“十二月”）；
var currentTime=新日期（）；
var month=currentTime.getMonth（）；
var day=currentTime.getDate（）；
var year=currentTime.getFullYear（）；
文件.书写（日+月[月]）；

我希望这就是您想要的描述。首先，删除ID为

date

的

div

上的

float:right

属性

然后，将

text align:center

放在

img

上的

logo

类中

最后，将

页边距顶部：125px

放在

div

上，ID为

页脚

。您可以修改此金额。下面是一段代码片段

.Fcontainer{
背景：灰色；
左侧填充：15px；
右侧填充：15px；
左边距：自动；
右边距：自动；
垂直对齐：中间对齐；
}
.行{
背景：橙色；
垂直对齐：中间对齐；
}
菜单{
保证金：0自动；
显示：内联块；
列表样式：无；
}
ul.footmenu-li{
浮动：左；
右边填充：8px；
}
ul.footmenu-lia{
显示：块；
保证金：0自动；
显示：内联块；
列表样式：无；
}
.标志{
文本对齐：居中；
}
#页脚{
边缘顶部：125px；
}

家
产品
我们的品牌
联系我们

你能附上输出的图像吗？如果我是你，我会考虑使用flexbox进行这种布局。这让事情变得容易多了。要详细说明@Winters答案。。。它还使它更具响应性。这将使徽标和列表项居中，我只希望徽标居中仅对徽标有效，div仍在页脚顶部为徽标指定一个类名，然后检查该徽标并将其移动到中心为所有对象指定类名，然后在此策略中移动所有对象…谢谢yash，这解决了我的一个问题。我仍然无法使包含这三个部分的div在页脚中垂直居中。它仍然位于顶部

<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;
}