Я пытаюсь выровнять div по центру страницы в boostrap 4, он не работает, даже если я пробовал использовать свойство margin:0 auto; float:none, он также не работает с этим. Я использовал класс d-block mx-auto, он тоже не работает, это мой html-код

<div class="d-block mx-auto col-centered">
        <ul id="social_nav" class="clearfix d-block mx-auto">
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
        </ul>
    </div>

Это код CSS

  .main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}
footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}
0
Tayyab Vohra 30 Дек 2017 в 13:32

2 ответа

Лучший ответ

Попробуйте установить width на свой div.

.main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}
footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="d-block mx-auto col-centered" style="background:red; width: 100px;">
  <ul id="social_nav" class="clearfix d-block mx-auto">
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
    <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
  </ul>
</div>
0
Mamun 30 Дек 2017 в 10:40

Вы можете сделать это, добавив класс

.col-centered{
     border: 1px solid;
    height: 150px;
    width: 400px;
     margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
 .main_footer {
    background: linear-gradient(#563d7c,#4d366f);
    color: #fff !important;
    -webkit-box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06), 0 4px 5px 0 rgba(0,0,0,0.06), 0 1px 10px 0 rgba(0,0,0,0.08);
    padding: 90px 0 130px 0;
    width: 100%;
    text-align: center;
}
footer #social_nav{
    float: none;
    list-style: none;
}

.footlist {
    color: #fff;
    float: left;
}
.col-centered{
     border: 1px solid;
    height: 150px;
    width: 400px;
     margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <div class="d-block mx-auto col-centered">
        <ul id="social_nav" class="clearfix d-block mx-auto">
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
          <li class="footlist"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></li>
        </ul>
    </div>
0
Shrroy 30 Дек 2017 в 10:43