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/

＆＃13;

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

＆＃13;

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

＆＃13;

另请查看this。

正如已经建议flexbox guide。

编辑：我已经编辑了代码并添加了实际图像以用于示例目的。我希望你能得到它的要点，并能够对它进行微调。

Answer 2

我希望这是您正在寻找的描述。首先，删除ID为float: right的{{1}}上的div媒体资源。

然后，将date放在text-align: center的{{1}}上。

最后，将img放在ID为logo的{{1}}上。您可以修改此金额。这是一段代码片段。

margin-top: 125px

div

Answer 3

在Css中使用Inspect工具并根据需要移动课程不要将边距初始化为自动而不是以像素为单位给出，这是通过检查来完成的方法

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

Div不会垂直居中于页脚

5 个答案: