Question

每当我解决布局问题时，我似乎都在创建一个新问题。我有一个问题在我正在构建的文本滑块上得到了很好的解决。相比之下，JS部分很容易。我想要做的就是在父容器中有两个绝对定位的元素，它们与外包装器垂直对齐。

我在这里重新创建了问题：http://codepen.io/emilychews/pen/oBPjbR

我必须保留某些元素，所以我无法摆脱滑块包装器，但我希望两组文本都位于外部元素的垂直中间。任何帮助都会让我的头发掉下来很棒。

.outerwrap {
background:red;
width: 100%;
height: inherit;
padding: 10% 5%;
}
.bb_slide_text2 {
position: absolute;
top: 0;
padding-top: 10%;
}

<section class="outerwrap">
  <div class="bb_slidetextwrapper2">
    <div class="bb_slide_text bb_slide_text1">
      <h2>First Heading</h2>
      <p>First line of text</p>
    </div>
    <div class="bb_slide_text bb_slide_text2">
      <h2>Second Heading</h2>
      <p>Second Line of text</p>
    </div>
  </div>
</section>

艾米丽

Answer 1

首先删除position:absolute的{{1}}，如果你想要它们是正确的和左边的（因为你设置了.bb_slide_text我认为这样）就是这样：

top:0

如果你想要它们是逐行的红色屏幕中间，忘记上面的样式并使用这个：

.bb_slidetextwrapper2 {
   display: flex;
   justify-content: space-between;
   padding: 0 30px;
}

我在你的样本中看到了另一个问题，我建议使用它：

.bb_slidetextwrapper2 {
display: flex;
justify-content: space-between;
padding: 0 30px;
flex-direction: column;
justify-content: center;
align-items: center;
}

Answer 2

如果要在容器中使用absolute，则应将其设置为relative作为定位子项的引用。

然后大小，coordonates和margin可以完成剩下的工作。

    .outerwrap {
      background: red;
      width: 100%;/* a false good idea, no need but if used mind box-sizing */
      box-sizing: border-box;/* this includes padding and border into width calculation */
      height: inherit;
      padding: 10% 5%;/* here comes the padding to add or not to width ... */
      position: relative;/* helps to hold absolute child */
    }
    
    h2,
    p {
      margin: 0;
    }
    
    .bb_slide_text {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      height: 3em;
    }
    
    .bb_slide_text2 {
      right: 5%;
    }

<section class="outerwrap">
<!--   slide wrapper -->
  <div class="bb_slidetextwrapper2">
<!--     first slide -->
    <div class="bb_slide_text bb_slide_text1">
      <h2>First Heading</h2>
      <p>First line of text</p>
    </div>
<!--     second slide -->
    <div class="bb_slide_text bb_slide_text2">
      <h2>Second Heading</h2>
      <p>Second Line of text</p>
    </div>
  </div>
</section>

从这里开始，你应该记住，如果宽度不够宽，两个盒子可以重叠，而其他兄弟可以站在同一个区域......所以你的下一个问题是什么:)？ 你可能首先不需要绝对

垂直对齐绝对元素/ Flexbox

2 个答案: