將div對齊到下一個元素的垂直中間

我想將一個元素與前一個元素的垂直中心對齊。

在上面的示例中，我想將文本的頂部與旁邊影像的垂直中心對齊。

所以文本的高度是可變的，上邊距應該只朝向影像的垂直中心。

問題是影像沒有固定的高度，否則我只會使用邊距或填充。所以我的想法是通過 JavaScript 計算影像的高度，將其除以 2，然后將其分配為文本的邊距。

我用 Flexbox 試過，但我必須給文本一個固定的高度：

.container {
  display: flex;
  flex-flow: row wrap;
  max-width: 800px;
  width: 800px;
  margin: 0 auto;
}

.container .image {
  flex: 0 0 50%;
}

.container .image img {
  width: 100%;
  height: auto;
}

.container .text {
  flex: 0 0 50%;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
}

.container .text .inner {
  height: 50%;
  background: #ccc;
}

<div class="container">
  <div class="image">
    <img src="http://via.placeholder.com/800x500">
  </div>
  <div class="text">
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
 </div>

如您所見，文本會溢位，因為我必須將其高度設定為 50%，這是基于影像的。

uj5u.com熱心網友回復：

你也可以使用 CSS Grid 來做到這一點。有一個 2x2 網格，左側的專案跨越兩行，右側的專案在右下象限的頂部自對齊。

.container {
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: repeat(2, 1fr); 
  gap: 0px 0px; 
}
.image { grid-area: 1 / 1 / 3 / 2; }
.text { grid-area: 2 / 2 / 3 / 3; }

.image {
  display: grid;
  place-items: center;
}

.text {
  align-self: start;
}

/* misc */
.image {
  background: salmon;
  resize: vertical;
  overflow: hidden;
}
.text { background: beige }

<div class="container">
  <div class="image"><p>This will be centered.</p></div>
  <div class="text"><p>This will be aligned to the center of the item on the left.</p></div>
</div>

uj5u.com熱心網友回復：

我喜歡使用 CSS Grids 來處理這類東西，但你必須知道你的父元素的高度和寬度

.my-grid {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-areas: 
            "a x"
            "a b";
}

.left {
  grid-area: a;
  background-color: #ffa08c;
}
.right {
  grid-area: b;
  background-color: #8ca0ff;
}

<div class='my-grid'>
  <div class='left'></div>
  <div class='right'></div>
</div>

uj5u.com熱心網友回復：

也許有填充

* {
  box-sizing: border-box;  
}

.container {
  display: flex;
  margin: auto;
  max-width: 600px;
  min-height: 300px;
  border: 1px solid black;
}

.container div {
  flex: 1 0 200px;
}

.left {
  background-color: rgb(255, 179, 164);
  display: flex;
  justify-content: center;
  align-items: center;
}

.right {
  padding: 1em;
  padding-top: 25%; /* the trick */
}

p {
  margin: 0; /* remove extra space at text top */
}

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
  </div>

  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

標籤：javascript html css

上一篇：我怎樣才能每周對串列進行洗牌并使其在所有設備上保持一致？

下一篇：在CSS中調整文本位置