不能在另一个 div 中水平居中 div答案

【问题标题】：Can't horizontally center div inside another div不能在另一个 div 中水平居中 div
【发布时间】：2020-05-21 21:44:04
【问题描述】：

一般来说，我知道如何将 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>

所以基本上，我的问题是我需要我的按钮粘在“Container 4”div 的底部。为此，我将 'button-wrap' 定位到 absolute 和 'bottom: 0'。但随后 4 个按钮不再居中。我尝试了很多不同的选项（添加边距：0 自动；文本对齐；更改位置等），但没有一个对我有用。它要么删除定位绝对值（然后将按钮居中，但还将按钮向上移动到 Container 4 div 的顶部）。或者当我使用绝对（如代码所示）时，按钮会粘在底部但不再居中。

仅用于上下文：这是使用 Jquery 构建的，因此单击按钮时，相应的内容（1、2、3 或 4）将显示在 Container4 中。

非常感谢！

【问题讨论】：

将width: 100% 添加到.button-wrap
@dmikester1 成功了，非常感谢！！但是，我在这段代码中遇到了另一个问题:(按照我在这里所示的编写方式，其他按钮不再起作用。意思是，如果我按下它们，Container4 div 将保持为空，而不是加载新内容。当我将按钮包装器 div 放在内容 div 之外时，它再次起作用（虽然两个 div 仍然在 Container 4 div 中）。但是按钮不再在 Container4 div 中，而是在下一节的顶部/ div。我尝试添加内联块，但这没有帮助。知道为什么会这样吗？
我猜你在这个问题中的代码比这里更多。因为目前没有附加这些按钮的功能。如果不查看其余代码，就无法弄清楚发生了什么。但在一个全新的问题中，这可能是最好的。

标签： html css center centering text-align

【解决方案1】：

您需要使按钮 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>

【讨论】：