将 div 对齐到下一个元素的垂直中间

Question

我想将一个元素与前一个元素的垂直中心对齐。

在上面的示例中，我想将文本的顶部与旁边图像的垂直中心对齐。

所以文本的高度是可变的，上边距应该只朝向图像的垂直中心。

问题是图像没有固定的高度，否则我只会使用边距或填充。 所以我的想法是通过 JavaScript 计算图像的高度，将其除以二，然后将其作为边距分配给文本。

我用 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%，这是基于图像的。

Answer 1

您也可以使用 CSS 网格执行此操作。 有一个 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>

Answer 2

我喜欢用 CSS 网格来做这种东西，但是你必须知道你的父元素的高度和宽度

 .my-grid { display: grid; width: 500px; height: 500px; grid-template-areas: "ax" "ab"; }.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>

Answer 3

也许有填充

 * { 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>