无法将位于 div 中的滑块置于另一个 div 中

Question

我正在使用 Wordpress 构建一个网站，并且对我的主页有疑问。它被 div 放入 3 个容器 div 中，每个容器占据整个屏幕。在我的第二个 div 中，我有一个类似 tab-function 的东西。意思是，div container2 div 底部有 4 个按钮，根据您单击四个按钮中的哪一个，将加载不同的内容（内容 1、2、3 或 4）。

我希望这 4 个内容 div 的结构相同。左侧应该是一个滑块，它不会占据整个左侧。所以你仍然可以在滑块周围看到 div 容器 2 的背景（我会添加一些填充）。不知何故，我无法将此 div 与滑块（水平和垂直）居中。我特别困惑，因为左侧也有一个标题，并且已经水平居中，但不知何故幻灯片一直被推到左边。就上下文而言，我没有自己编写滑块代码，我使用了 Smart Slider 3 WP 插件，然后简单地将短代码复制并粘贴到容器 2 div 左侧的 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";
}

Answer 1

Flexbox 会帮到你很大的忙。这是一个基本示例。

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>

无法将位于 div 中的滑块置于另一个 div 中

Can't center a slider that is in a div in another div

html

javascript

css

center