Centre elements until content is long enough, then align to top? - html

Question

I have a group of items which display an icon (image) with title + text below.
This mostly works fine. However on some pages there isn't a paragraph of text for each item, just a title. So when the icon is displayed horizontally alongside only a title it looks odd when the title is aligned to the top.
My question is, is it possible to center the icon alongside the text, until the content is tall enough to hit the top of the icon/container?
Example with title + text (1): https://codepen.io/moy/pen/YOZyeG
Example with only a title (2): https://codepen.io/moy/pen/RYpWBp
As you can see in example (1) on mobile the icons work well responsively as the text fills up the same.
On the second example (2), the title is positioned at the top of the icon which looks a bit crap!
I have tried vertically centring the title alongside the icon but then when text is added it looks odd. So is it possible to centre the icons until the title/text takes up enough vertical space to hit the top of the container, then it would just be top aligned?
Or am I going to need to have 2 different classes like .features and then .features--centred or .features--no-text for items with not as much content?
Thanks in advance, tying myself in knots here!
/**
* Base `html` styling.
*/
html {
background: white;
font-size: 62.5%;
}
/**
* Base `body` styling.
*/
body {
background-color: white;
color: grey;
font-family: "Roboto", sans-serif;
font-size: 13px;
font-size: 1.3rem;
font-weight: 400;
line-height: 1.8;
margin: 0;
padding: 30px 0 0;
text-rendering: optimizeLegibility;
}
#media (min-width: 64em) {
body {
font-size: 14px;
font-size: 1.4rem;
}
}
/* ==========================================================================
#FEATURES
========================================================================== */
/**
* Features/service panel. Each item has an icon, title and short text entry.
*
* 1. The number of items can change from 5 - 6, so I've set flex-direction to
* 'row' on desktop (when the items are in a row) so the items will always be
* spaced evenly.
* 2. Need to overwrite `align-items` so the icons are vertically aligned to the
* top of the container.
*/
.features {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
}
.features:before,
.features:after {
content: "";
display: table;
}
.features:after {
clear: both;
}
#media (min-width: 48em) {
.features {
display: block;
margin-left: -30px;
}
}
#media (min-width: 64em) {
.features {
margin-left: 0;
display: flex;
flex-direction: row;
align-items: flex-start;
}
}
/**
* The wrapper for each featured item that contains an icon, title and short
* sentence.
*
* 1. I've removed the width, which was always 20% as there were always 5 items
* but now that can change and we've added `flex-direction: row;` to the
* parent div we shouldn't need it.
* 2. Make items have equal widths. If not applied they'll be uneven.
*
*/
.features__item {
background: none;
box-sizing: border-box;
margin: 0;
padding: 0 0 0 65px;
width: 100%;
max-width: 500px;
}
.features__item:before,
.features__item:after {
content: "";
display: table;
}
.features__item:after {
clear: both;
}
#media (min-width: 48em) {
.features__item {
float: left;
padding: 0 0 0 95px;
width: 50%;
max-width: none;
}
.features__item:nth-child(odd) {
clear: left;
}
}
#media (min-width: 64em) {
.features__item {
flex-grow: 1;
flex-basis: 0;
text-align: center;
padding: 0 15px;
width: auto;
}
.features__item:nth-child(odd) {
clear: none;
}
}
.features__icon-wrap {
background-color: teal;
border-radius: 100%;
display: inline-block;
height: 50px;
line-height: 50px;
margin: 0 0 30px -65px;
float: left;
text-align: center;
width: 50px;
}
.features__icon-wrap .icon {
fill: white;
height: 25px;
width: 25px;
}
#media (min-width: 64em) {
.features__icon-wrap {
float: none;
margin-left: 0;
height: 100px;
line-height: 100px;
width: 100px;
}
.features__icon-wrap .icon {
height: 50px;
width: 50px;
}
}
.features__title {
color: black;
font-size: 14px;
font-size: 1.4rem;
font-weight: 900;
margin-bottom: 7.5px;
}
#media (min-width: 64em) {
.features__title {
font-size: 16px;
font-size: 1.6rem;
}
}
.features__text {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.4;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900|Roboto:400,400i,700,700i" rel="stylesheet">
<ul class="features">
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--24-hour"><use xlink:href="img/sprite/sprite.svg#icon-24hour"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--room"><use xlink:href="img/sprite/sprite.svg#icon-room"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--rosette"><use xlink:href="img/sprite/sprite.svg#icon-rosette"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--taxi"><use xlink:href="img/sprite/sprite.svg#icon-taxi"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</li>
<li class="features__item">
<div class="features__icon-wrap">
<svg class="icon icon--ticket"><use xlink:href="img/sprite/sprite.svg#icon-ticket"></use></svg>
</div>
<h3 class="features__title">Lorem ipsum dolor</h3>
<p class="features__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem ipsum dolor sit amet.</p>
</li>
</ul>

Answer 1

You can do this with flexbox. You make the text always centered and the icon flex-start. When the text is taller the center will be equivalent to flex-start.
Here is a simplified example:
.box {
max-width: 320px;
display: flex;
align-items: flex-start;
border: 1px solid;
}
.icon {
width: 80px;
height: 80px;
background: teal;
margin-right:10px;
border-radius: 50%;
flex-shrink: 0;
}
.text {
align-self: center;
border: 1px solid;
}
h3,p {
margin: 5px 0;
}
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel orci orci. Suspendisse ultrices velit sit amet venenatis venenatis. Pellentesque non leo nec ipsum pulvinar aliquet ut ac lorem</p>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
</div>
</div>
<div class="box">
<div class="icon"></div>
<div class="text">
<h3>a title</h3>
<p>orem ipsum dolor sit amet, </p>
</div>
</div>