You can also do this with CSS Grid. Have a 2×2 grid, where the item on the left spans the two rows, and the item on the right is self aligned at the top of the bottom right quadrant.
.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>
I like to use CSS Grids for this kind of stuff, but you have to know your parent element height and width
.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>
I would like to align an element to the vertical center of the previous element.
In the example above, I would like to align the top of the text with the vertical center of the image next to it.
So the height of the text is variable, the top margin should be oriented only to the vertical center of the image.
The problem is that the image doesn’t have a fixed height, otherwise I would just work with a margin or padding. So my idea is to calculate the height of the image via JavaScript, divide it by two and then assign it as margin to the text.
I tried it with Flexbox, but there I have to give the text a fixed height:
.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>
As you can see, the text runs into an overflow because I had to give it a height of 50% and this is based on the image.
Nice, except your text should be aligned to the top.
Thank’s four you reply! Unfortunately, if the text gets longer, it runs into an overflow.
You don’t need to know heights. They can be proportionate.
Unfortunately I can’t work with a fixed height, because I don’t know how high the image or how long the text is.
@Jonas, romellem has provided a nice answer using grids where you don’t need a fixed height. I believe that is the best answer.
