как вертикально отцентрировать контейнер с помощью flexbox - PullRequest
Новая
       4

как вертикально отцентрировать контейнер с помощью flexbox

0 голосов
/ 24 сентября 2018

Я пытаюсь использовать flexbox для вертикального центрирования контейнера.Странно, это не работает, я следую руководству по Flexbox из хитростей CSS.

HTML: 

html,
body {
  heigth: 100vh;
}

#about {
  font-family: 'Gloria Hallelujah', cursive;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#about img {
  border-radius: 50%;
  width: 200px;
  heigth: 200px;
}

#about .info {
  margin-top: 50px;
}

#about .what {
  margin-top: 50px;
}
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--Custom CSS-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<!--Customs Fonts-->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">

<!-- Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<section>
  <div class="container">
    <div id="about">
      <div class="row mx-auto ">
        <div class="col-12 ">
          <img class="img-fluid mx-auto " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzpG8UdSTY-7yaLe4NIL8xtHTHOAcTAUpujInNMuZSUzzAuHbA">
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <p class="text-center info align-middle"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea odit est exercitationem, quod aspernatur adipisci! Esse eligendi minus nemo, earum veritatis vel delectus provident veniam numquam cumque. Illum, fugit sit?</p>
        </div>
      </div>
      <div class="row">
        <div class=col-12>
          <p class="text-center what"> My skills:
            <p>
        </div>
      </div>
      <div class="row">
        <div class="col-3">
          <p class="text-center">HTML5:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 95%">95%</div>
              </div>
        </div>
        <div class="col-3">
          <p class="text-center">CSS3 / SaSS:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
              </div>
        </div>
        <div class="col-3">
          <p class="text-center">Bootstrap:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 40%">40%</div>
              </div>
        </div>
        <div class="col-3">
          <p class="text-center">Javascript:
            <p>
              <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 20%">20%</div>
              </div>
        </div>
      </div>
    </div>
</section>

<!-- Bootstrap Required-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--Custom Scripts-->
<script src="js/main.js"></script>

Это всего лишь один раздел моего портфолио, я хочу, чтобы в нем было 3 раздела одинакового размера и все содержимое было бы вертикально и горизонтально отцентрировано.,Я также оставляю вам кодовый блок.

Правильно ли я пишу свой бутстрап?

Кодовый блок: https://codepen.io/Sarithan/pen/xaNgQK?editors=1100

Ответы [ 2 ]

0 голосов
/ 24 сентября 2018

К вашему тегу body добавьте: 

body {
    height: 100vh; /*Careful with this, you wrote it wrong.*/
    display: flex;
    align-items: center;
    justify-content: center;
}
0 голосов
/ 24 сентября 2018

Как объяснено в других вопросах о вертикальном центрировании , родительский элемент элемента, который вы пытаетесь отцентрировать, должен быть в полный рост.В вашем случае только html, body имеют полную высоту.Кроме того, используйте flexbox на родительском для центрирования дочернего элемента #about div ...

  • Используйте h-100, чтобы сделать section и .container полной высоты тоже.
  • Сделать флексбокс .container и авто-поля (my-auto) для вертикального центрирования ребенка #about дел. 
<section class="h-100">
    <div class="container h-100 d-flex flex-column">
        <div id="about" class="my-auto">
            ....
        </div>
    </div>
</section>

https://www.codeply.com/go/Ojbh66tGRt

Или используйте justify-content-center на родительском ... 

   <section class="h-100">
        <div class="container h-100 d-flex flex-column justify-content-center">
            <div id="about">
                ....
            </div>
        </div>
    </section>
...