代码之家 › 专栏 › 技术社区 › Sam JvdBerg

响应浮子内的垂直和水平中心

css html

Sam JvdBerg · 技术社区 · 6 年前

我有两个一半并排,这是实现使用浮动。

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

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

这是什么 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实现吗?

2 回复 | 直到 6 年前

connexo 6 年前

两个都包在一个 .flexcontainer (使一行中的所有子元素的高度相等),确保 .parent 高度100% .half .

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