Seeking guidance on aligning an element to the vertical center of another element.
https://i.sstatic.net/Hk8UE.png
In the provided scenario, the goal is to align the top of text with the vertical center of the adjacent image.
https://i.sstatic.net/hxmm9.png
The challenge lies in the variability of text height, requiring the margin to align only with the image's vertical center.
An attempted solution involved utilizing Flexbox, but it demanded a fixed height for the text:
.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 ...</p>
</div>
</div>
</div>Resorting to JavaScript for determining and applying dynamic margins based on calculated image height may be a potential workaround.