Горизонтальное центрирование div в элементе flex - PullRequest
Новая
       16

Горизонтальное центрирование div в элементе flex

0 голосов
/ 15 февраля 2019

У меня есть 3 флексов (каждый предмет - это div).Каждый элемент flex содержит изображение, 2 тега абзаца и элемент div (для кнопки).Я пытаюсь горизонтально центрировать каждую кнопку в каждом элементе flex.

Я попытался установить justify-content:center; в контейнере flex, но это не сработало.(Я не думаю, что это то, что я хочу в любом случае, потому что я хочу, чтобы div был только центрирован по горизонтали) Я также попытался установить margin: 0 auto; для кнопки.Ни один из них, кажется, не работает.В настоящее время каждый элемент flex имеет ширину 33%, поэтому я установил для внутреннего div значения position: absolute; и left: 16.5%; (половина ширины контейнеров).Но это выглядит не так.Это самое близкое, что у меня есть.Любые идеи о том, как сделать это лучше?

HTML: 

<section class="overview-section">
  <h2>Overview</h2>

  <div class="row">
    <div class="box">
      <img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
      <p class="under-text">TITLE GOES HERE</p>
      <p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </p>
      <div class="btn">Learn more</div>
    </div>
    <div class="box">
      <img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
      <p class="under-text">TITLE GOES HERE</p>
      <p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
      </p>
      <div class="btn">Learn More</div>
    </div>
    <div class="box">
      <img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
      <p class="under-text">TITLE GOES HERE</p>
      <p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
      </p>
      <div class="btn">Learn more</div>
    </div>
  </div>

</section>

CSS: 

@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,500");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
@import url("https://fonts.googleapis.com/css?family=Staatliches");

.row {
  display: flex;
  margin: 0 -50px;
}

.box {
  position: relative; /* button will be positioned relative to this container */
  border: 2px solid blue;
  width: 33%;
  height: 450px;
  margin: 0 50px;
}

.box img {
  width: 100%;
  height: 250px;
}

.under-text {
  font-family: "Staatliches", cursive;
  color: red;
  text-align: center;
}

.txt {
  padding-left: 20px;
}

.btn {
  position: absolute;
  left: 16.5%;
  bottom: 0;

  background-color: #4caf50;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

Codepen: https://codepen.io/anon/pen/rPqgVm

Ожидаетсярезультат: каждый элемент div в элементах flex должен располагаться по центру по горизонтали.

Ответы [ 4 ]

0 голосов
/ 15 февраля 2019

Удалить из 

.btn {
  position: absolute;
  left: 16.5%;
  bottom: 0;
}

И добавить в 

.box {
display: flex;
flex-direction: column;
align-items: center;
}
0 голосов
/ 15 февраля 2019

Вы также можете заключить btn div в другой div и добавить 

 display: flex;
 justify-content: center;

и удалить абсолютное и левое из существующего btn div.

модифицированный codePen: https://codepen.io/anon/pen/ErOYPw

0 голосов
/ 15 февраля 2019

Я использую Grid, но, возможно, это предложение поможет.Поместите кнопку в собственный контейнер, а затем отцентрируйте его в этом контейнере. 

<div class = 'btncontainer'>
    <div class="btn">Learn more</div>
</div>
0 голосов
/ 15 февраля 2019

Полагаю, вы говорите о .btn правильно?Если это так, у вас есть два варианта.

Снимите абсолютную позицию и присвойте ей автоматические поля.(«Авто» означает столько, сколько вы можете получить в равной степени) 

.btn {
 // margin top & bottom - margin left& right
 margin: 10px auto;
}

Или, если вы сохраняете абсолютную позицию, вам нужно установить левое значение на 50%, а затем потянуть левый угол div НАЗАД 50%его ширины 

.btn {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}
...