无法在另一个 div 内水平居中 div

Question

一般来说，我知道如何使 divs 居中，但在以下情况下我迷路了：

/* 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' 定位为绝对和 'bottom: 0'。但随后 4 个按钮不再居中。我尝试了很多不同的选项（添加边距：0 自动；文本对齐；改变位置等），但 none 对我有用。它要么删除绝对定位（然后将按钮居中，但也将按钮向上移动到 Container 4 div 的顶部）。或者当我使用绝对（如代码所示）时，按钮会粘在底部但不再居中。

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

非常感谢！

Answer 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>

无法在另一个 div 内水平居中 div

Can't horizontally center div inside another div

html

css

text-align

center

centering