Patryk Dąbrowski Patryk Dąbrowski - 14 days ago 6
CSS Question

How to center vertically text in figure?

I would like to have both texts center vertically to image on resolution 720px.
The text "serwis" is not centered vertically to image right now.
How should I do it?
Here's a demo codepen

HTML code

<section class="primary">
<figure class="primary__figure">
<img class="primary__img" src="http://www.linkpad.me/static/img/welcome/key.png" alt="">
<figcaption class="primary__caption">serwis</figcaption>
</figure>

<figure class="primary__figure">
<img class="primary__img" src="http://www.linkpad.me/static/img/welcome/key.png" alt="">
<figcaption class="primary__caption primary__caption--secondary">częsci zamienne</figcaption>
</figure>
</section>


SCSS code

$font: 'Lato', sans-serif;
$break-medium: 45em;
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size;
font-size: calculateRem($size);
}
.primary {
background: -webkit-linear-gradient(top, rgb(10,198,162) 0%,rgb(0,160,175) 100%);
height: 500px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media only screen and (min-width: $break-medium) {
display: flex;
flex-direction: row;
}

&__figure {
padding: 20px;
}

&__img {
width: 100px;
}

&__caption {
font-family: $font;
text-transform: uppercase;
font-weight: 700;
@include font-size(30px);
text-align: center;
color: rgb(255,255,255);
padding-top: 10px;
@media only screen and (min-width: $break-medium) {
float: right;
@include font-size(40px);
padding-left: 20px;
}

&--secondary {
width: 100px;
flex-wrap: wrap;
@media only screen and (min-width: $break-medium) {
width: 200px;
}
}
}
}

Answer

You have float: right in <figcaption>. Floated elements cannot be used for vertical-align. So, you need to do:

.primary__caption, .primary__img {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

Preview

preview

CodePen: http://codepen.io/anon/pen/NbpvyL

Comments