[英]Div wont vertically center in footer
im tring to set up my footer, but cannot for the life of me get it to do what i want. 我想建立我的页脚,但是不能一辈子让它做我想做的事情。 What im trying to do is;
我想做的是 have the footer, with a div in the (vertical) center and then have some nav links on the left, a logo in the middle and the date on the right.
具有页脚,在(垂直)中心具有div,然后在左侧具有一些导航链接,在中间具有徽标,在右边具有日期。 My main problems are that i cant get the div to (vertically) center, and i cant get the logo to (horizontally) center in the middle of the 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 的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;
}
Here is a little fiddle that might work for you: 这里有一些小提琴可能对您有用:
https://jsfiddle.net/9tcxnocb/7/ 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>
Also take a look at this . 也看看这个 。
And as already suggested flexbox guide . 并且正如已经建议的flexbox指南 。
Edit: I have edited the code and added and actual image for example purposes. 编辑:出于示例目的,我已经编辑了代码并添加了实际图像。 I hope you get the gist of it and will be able to fine tune it.
希望您能掌握要点,并可以对其进行微调。
I hope this was the description you were looking for. 我希望这是您正在寻找的描述。 First of all, remove the
float: right
property on the div
with the ID of date
. 首先,删除ID为
date
的div
上的float: right
属性。
Then, put text-align: center
on the img
with the class of logo
. 然后,将
text-align: center
以logo
类放在img
text-align: center
。
Finally, put the margin-top: 125px
on the div
with the ID footer
. 最后,在ID
footer
margin-top: 125px
的div
上放置margin-top: 125px
。 You can modify this amount. 您可以修改此金额。 Here is a code snippet.
这是一个代码片段。
.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>
In Css use the Inspect tool and move the class as your need Dont initialize margin as auto instead of give in pixels which is done by inspect 在Css中,使用Inspect工具并根据需要移动类。不要将边距初始化为auto,而不必像通过check那样输入像素
method 方法
Try this. 尝试这个。
.Fcontainer {
background:grey;
padding-left:15px;
padding-right:15px;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
text-align:center;
}
Most wise decision will be 最明智的决定是
<style>
#footer{
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="footer">
</div >
Otherwise, you should do this: 否则,您应该这样做:
.logo{
position: absolute;
left: 50%;
top: 50px;/*according to your center position*/
width: 300px;
margin-left: -150px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.