Не может горизонтально центрировать div внутри другого div - PullRequest
Новая
       47

Не может горизонтально центрировать div внутри другого div

0 голосов
/ 06 февраля 2020

В общем, я знаю, как центрировать div, но я потерян для следующего случая: 

/* Container4 Styling */

.container4 {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #CDE5E1;
  text-align: center;
}


/* Tab HP Styling */

.one {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: red;
  position: relative;
}


/* Tab HP BUTTON Styling */

.content {
  height: 100vh;
  width: 100%;
}

.button-wrap {
  position: absolute;
  bottom: 0;
}

a.button {
  color: #fff;
  text-decoration: none;
  padding: 15px 50px;
  display: inline-block;
}

a.active {
  color: black;
  display: inline-block;
}

div[class*="content-"] {
  display: none;
}

div.active {
  display: inline-block;
}
<div class="container4">


  <div class="content">
    <div class="content-1 active one">
      <h1>Content</h1>



      <div class="button-wrap">
        <a href="#" class="button">  Button1  </a>
        <a href="#" class="button">    Button2  </a>
        <a href="#" class="button">  Button3  </a>
        <a href="#" class="button">  Button4 </a>
      </div>



    </div>

    <div class="content-2 two"> content 2 </div>

    <div class="content-2 three"> content 3 </div>

    <div class="content-2 four"> content 4 </div>

  </div>


</div>

В общем, моя проблема в том, что мне нужно, чтобы мои кнопки прилипали к нижней части «Контейнера 4». Для этого я поместил 'button-wrap' в абсолютное значение и 'bottom: 0'. Но тогда 4 кнопки больше не центрированы. Я попробовал так много разных опций (добавление поля: 0 автоматически; выравнивание текста; изменение положения и т. Д. c), но ни один из них не работал для меня. Это либо удаление абсолютного позиционирования (которое затем центрирует кнопки, но и перемещает кнопки вверх в верхнюю часть делителя контейнера 4). Или когда я использую абсолютное (как показано в коде), тогда кнопки придерживаются снизу, но больше не центрируются.

И только для контекста: это сборка с Jquery, так что при нажатии на Кнопка соответствующего содержимого (1, 2, 3 или 4) будет отображаться в контейнере 4.

Большое спасибо заранее!

1 Ответ

2 голосов
/ 06 февраля 2020

Вам нужно, чтобы кнопки div занимали всю ширину, чтобы они правильно центрировались. Добавьте width: 100%; к .button-wrap. 

/* Container4 Styling */

.container4 {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #CDE5E1;
  text-align: center;
}


/* Tab HP Styling */

.one {
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: red;
  position: relative;
}


/* Tab HP BUTTON Styling */

.content {
  height: 100vh;
  width: 100%;
}

.button-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
}

a.button {
  color: #fff;
  text-decoration: none;
  padding: 15px 50px;
  display: inline-block;
}

a.active {
  color: black;
  display: inline-block;
}

div[class*="content-"] {
  display: none;
}

div.active {
  display: inline-block;
}
<div class="container4">

  <div class="content">
    <div class="content-1 active one">
      <h1>Content</h1>

      <div class="button-wrap">
        <a href="#" class="button">Button1</a>
        <a href="#" class="button">Button2</a>
        <a href="#" class="button">Button3</a>
        <a href="#" class="button">Button4</a>
      </div>

    </div>

    <div class="content-2 two"> content 2 </div>

    <div class="content-2 three"> content 3 </div>

    <div class="content-2 four"> content 4 </div>

  </div>

</div>
...