Align text vertically along the same line in different containers
I have a container with two other pieces of text inside - title and description, for example:
.item {
box-sizing: border-box;
width: 33%;
text-align: center;
padding: 20px;
border: 1px solid #CCC;
min-height: 200px;
margin: 20px;
}
.item-title {
font-size: 28px;
margin-bottom: 15px;
}
.item-description {
font-size: 12px;
}
<div class="item">
<div class="item-title">Title</div>
<div class="item-description">Some descriptive text</div>
</div>
<div class="item">
<div class="item-title">A Much Longer Title</div>
<div class="item-description">Some other descriptive text</div>
</div>
Here's a diagram of the desired effect:
I would like the title to be vertically centered at the same point (blue line), no matter how many lines it ends. The description should always be below it, at the same distance from the title, with alignment along the edges (red line). So the blue line doesn't move, but the red line can.
What I have tried so far:
-
Apply a negative Y transformation to the title. It worked with the fact that it moved the title, but the description text didn't follow it.
-
Margins: tried to set the vertical percentage, but of course this is relative to the parent's width and not the element's height, it didn't have the desired effect.
-
Flexbox: Same result as margins.
-
position: absolute by name. Works for vertical alignment of the title, but then it is very difficult to align the description.
After some time of experimentation and a lot of reading, it seems like it might not be possible, but if anyone can manage to work it out, I would be very interested to know how to do it.
source to share
I agree with you. I don't think this is possible with CSS alone.
Your requirements:
I would like the title to be vertically centered at the same point (blue line), no matter how many lines it ends. The description should always be below it, at the same distance from the title, with alignment along the edges (red line). So the blue line doesn't move, but the red line can.
The next solution satisfies requirement # 1 (blue line). The headings are located along the same horizontal line.
-
Make the top level parent (
.item
) a flex container. -
Give the first child (
.item-title
) the given proportion of container space. In my example below, I usedflex-grow: 3
. -
Also give the second child (
.item-description
) a given proportion of container space. I have usedflex-grow: 1
. -
Now vertical centering can be even in both containers because they occupy the same proportion of free space.
-
However, descriptions will also be proportional to the distance from the title element and cannot remain anchored to the same horizontal axis (red line).
.item {
display: inline-flex;
flex-direction: column;
vertical-align: top;
width: 33%;
text-align: center;
padding: 20px;
border: 1px solid #CCC;
min-height: 200px;
margin: 20px;
box-sizing: border-box;
}
.item-title {
flex: 3;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed red;
}
.item-description {
flex: 1; /* also try flex: 2 for a narrower gap between items */
font-size: 12px;
border: 1px dashed red;
}
hr {
position: absolute;
top: 100px;
background: blue;
width: 95vw;
}
<div class="item">
<div class="item-title">Title</div>
<div class="item-description">Some descriptive text</div>
</div>
<div class="item">
<div class="item-title">A Much Longer Title</div>
<div class="item-description">Some other descriptive text</div>
</div>
<hr>
The next solution satisfies requirement # 2 (red line). Descriptions are always at the same distance from the title. However, titles are no longer tied to the same horizontal axis.
- Put your title and description in one flex container.
- Use the top margin to set a fixed distance for the description from the title.
- NOTE. The description height and vertical margins determine how far from the heading line. In other words, the smaller the description and top margin, the closer the titles are to the blue line.
.item-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
font-size: 28px;
border: 1px dashed red;
}
.item-description {
margin-top: 5px;
font-size: 12px;
}
hr {
position: absolute;
top: 100px;
width: 95vw;
}
/* non-essential decorative styles */
.item {
display: inline-flex;
vertical-align: top;
width: 33%;
text-align: center;
padding: 20px;
border: 1px solid #CCC;
min-height: 200px;
margin: 20px;
box-sizing: border-box;
}
<div class="item">
<div class="item-title">Title<span class="item-description">Some descriptive text</span>
</div>
</div>
<div class="item">
<div class="item-title">A Much Longer Title<span class="item-description">Some other descriptive text</span>
</div>
</div>
<hr>
source to share