Div wont вертикально центр в нижнем колонтитуле

Question

im tring, чтобы настроить мой нижний колонтитул, но не может для жизни меня заставить его делать то, что я хочу. То, что я пытаюсь сделать, это; у вас есть нижний колонтитул, с 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

Надеюсь, это было описание, которое вы искали. Прежде всего, удалите имущество float: right на div с идентификатором date.

Затем введите text-align: center на img с классом logo.

Наконец, положите margin-top: 125px на div с ID footer. Вы можете изменить эту сумму. Вот фрагмент кода.

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

В Css использовать Осмотреть инструмент и переместить класс как ваши потребности Dont инициализации маржу как авто вместо давать в пикселах, который делается с помощью инспектировать
метод

Answer 3

Попробуйте это.

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

Answer 4

Самое мудрое решение будет

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

Answer 5

Вот немного скрипку, которые могли бы работать для вас:

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>

Также посмотрите на this.

И как уже было предложено flexbox guide.

Редактировать: Я отредактировал этот код и добавил и фактическое изображение для примера. Надеюсь, вы поймете суть этого и сможете точно настроить его.