Невозможно центрировать ползунок, который находится в div, в другом div - PullRequest
Новая
       3

Невозможно центрировать ползунок, который находится в div, в другом div

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

Я создаю веб-сайт с Wordpress и у меня есть вопрос относительно моей домашней страницы. Он разделен на 3 контейнера, каждый из которых занимает весь экран. В моем втором div у меня есть что-то вроде функции табуляции. Это означает, что в нижней части div есть 2 кнопки. Container2 div, и в зависимости от того, какую из четырех кнопок вы щелкнете, будет загружен другой контент (контент 1, 2, 3 или 4).

Я хочу структуру из этих 4 элементов содержимого должны быть одинаковыми. На левой стороне должен быть слайдер, который не занимает всю левую сторону. Таким образом, вы все еще можете видеть фон контейнера div 2 вокруг слайдера (я добавлю несколько отступов). Почему-то я не могу центрировать этот div с помощью ползунка (по горизонтали и вертикали). Я особенно сбит с толку, потому что левая сторона также имеет заголовок, и он уже центрирован по горизонтали, но слайд-шоу почему-то сдвигается влево. И просто для контекста, я не кодировал слайдер сам, я использовал плагин Smart Slider 3 WP, а затем просто скопировал и вставил шорткод в div внутри левой части контейнера 2 div. Может ли кто-нибудь помочь мне, как я могу центрировать это по горизонтали и вертикали?

Вот мой код:

HTML: 

<div class="container2">

  <div id="hp_slider_1" class="tabcontent">

    <div class="left">
      <div class="tabheading">
        <h5>Left side heading</h5>
      </div>

      <div class="slidertab">
        <?php echo do_shortcode('[smartslider3 slider=14]');?>
      </div>

    </div>


    <div class="right">
      <div class="tabheading">
        <h5>Right Side Heading</h5>
      </div>

      <div class="texttab">
        <h5 class="rightheading">Content1</h5>
        <p class="righttext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    </div>

  </div>

  <div id="hp_slider_2" class="tabcontent">
    <p>Content 2.</p>
  </div>

  <div id="hp_slider_3" class="tabcontent">

    <p>Content3.</p>
  </div>

  <div id="hp_slider_4" class="tabcontent">

    <p>Content 4.</p>
  </div>


  <div class="tab">
    <button class="tablinks" onclick="openCity(event, 'hp_slider_1')">Button1 </button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_2')">Button2</button>

    <button class="tablinks" onclick="openCity(event, 'hp_slider_3')">Button3</button>

    <button class="tablinks" onclick="openCity(event,'hp_slider_4')">Button4</button>
  </div>

</div>

CSS: 

/* Container2 Styling */

.container2 {
  overflow:hidden;
  height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #81A1AA;
  color: white;
  position: relative;
}

/* Style the tab content */
.tabcontent {
  text-align: center;
}

.left {
float: left;
width: 50%;
height: 100vh;
text-align: center;
}

.slidertab {
width: 100%;
}

.right {
float: right;
width: 50%;
height: 100vh;
}

.rightheading {

}

.righttext {

}

/* Style the tab */
.tab {
  overflow: hidden;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px 50px;
  transition: 0.3s;
  font-size: 16px;
  color: white;
  font-family: 'Raleway', sans-serif;
}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #4A6971;
}

/* Create an active/current tablink class */
.tab button.active {
  color: #4A6971;
}

JS: 

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

1 Ответ

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

Flexbox вам очень поможет. Вот базовый c пример. 

body {
  margin: 0;
}
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: DarkOrchid;
}

.parent {
  height: 50vh;
  width: 80vw;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background: teal;
  padding: .5rem;
  color: #fff;
}
<div class="container">
  <div class="parent">
    <div class="child">
    <p>this is a test</p>
    </div>
  </div>
</div>
...