Question

我有两个并排的一半，这是使用浮子实现的。

上半部的高度由图像定义。

下半部分有一些副本，需要垂直和水平对齐。

CSS tricks从“宽度和高度未知的元素？”中推荐以下内容：

.half {
  float: left;
  width: 50%;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="half">
  <img src="https://images.unsplash.com/photo-1532517308734-0565178471d2" alt="Image from Unsplash">
</div>

<div class="half">
  
  <div class="parent">
 
    <div class="child">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div><!-- .child -->
    
  </div><!-- .parent -->

</div><!-- .half -->

这不起作用。两半都需要相等的高度，并且可以使用JS或CSS来实现吗？

Answer 1

将两者都包装在.flexcontainer中（这使行中的所有子元素都相等），并确保.parent距.half的高度为100％。

.half {
  /* removed float here */
  width: 50%;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* new styles below */

.flexcontainer {
  display: flex;
  flex-direction: row;
}

.parent {
  height: 100%;
}

<div class="flexcontainer">
  <div class="half">
    <img src="https://images.unsplash.com/photo-1532517308734-0565178471d2" alt="Image from Unsplash">
  </div>

  <div class="half">

    <div class="parent">

      <div class="child">
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <!-- .child -->

    </div>
    <!-- .parent -->

  </div>
  <!-- .half -->
</div>
<!-- .flexcontainer -->

Answer 2

我在对齐材料时也遇到了麻烦。到目前为止，我能找到的最佳解决方案是根据vh和vw设置计算的顶部和左侧。大量的数学试图弄清楚。根据经验，Flex和Grid在某些平台上可能无法响应。因此，如果您需要非常绝对且没有重叠元素的东西，那么我相信表格是您的最佳选择。

响应浮动中的垂直和水平中心

2 个答案: