allegutta allegutta - 4 months ago 96
HTML Question

Center text over an image in flexbox

How can I centre align text over an

<img>
preferably using FlexBox?



body {
margin: 0px;
}

.height-100vh {
height: 100vh;
}

.center-aligned {
display: box;
display: flex;
box-align: center;
align-items: center;
box-pack: center;
justify-content: center;
}

.background-image {
position: relative;
}

.text {
position: absolute;
}

<section class="height-100vh center-aligned">
<img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg" />
<div class="text">SOME TEXT</div>
</section>




Answer

The layout can be achieved with flexbox and positioning properties. No changes to HTML.

.height-100vh {
    height: 100vh;
    display: flex;                    /* establish flex container */
    flex-direction: column;           /* stack flex items vertically */
    position: relative;               /* establish nearest positioned ancestor for
                                         absolute positioning */
}

.text {
    position: absolute;  
    left: 50%;                        /* horizontal alignment */
    top: 50%;                         /* vertical alignment */
    transform: translate(-50%, -50%); /* horizontal, vertical alignment fine tuning;
                                        explanation: http://stackoverflow.com/q/36817249 */
 }

Revised Codepen

The code above centers the text both vertically and horizontally over the image:

enter image description here