时间戳

首页 > 解决方案 > 无法将位于另一个 div 中的 div 中的滑块居中

javascript - 无法将位于另一个 div 中的 div 中的滑块居中

问题描述

我正在使用 Wordpress 建立一个网站，并且对我的主页有疑问。它分为 3 个容器 div，每个 div 占据整个屏幕。在我的第二个 div 中，我有一个选项卡功能。意思是，在 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";
}

标签： javascripthtmlcsscenter

解决方案

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>

推荐阅读