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> <img src="" /> <div>SOME TEXT</div> </section>

6 Answers

To center text over an image you don't need flexbox. Just use CSS positioning properties.

.height-100vh { height: 100vh; position: relative; /* establish nearest positioned ancestor for absolute positioning */ } .text { position: absolute; left: 50%; /* horizontal alignment */ top: 50%; /* vertical alignment */ transform: translate(-50%, -50%); /* precise centering; see link below */ } 

body { margin: 0px; } .height-100vh { height: 100vh; display: flex; /* establish flex container */ flex-direction: column; /* stack flex items vertically */ position: relative; /* establish nearest positioned ancenstor for absolute positioning */ } .text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; font-weight: bold; } .center-aligned { display: flex; align-items: center; justify-content: center; }

<section> <img src="" /> <div>SOME TEXT</div> </section>

Revised Codepen

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

For a more detailed explanation of the centering method see:

• Element will not stay centered, especially when re-sizing screen

You can just wrap an image with relatively positioned inline-block <div> and give the text this way:

* {margin: 0; padding: 0; list-style: none;} .img-holder {position: relative; display: inline-block;} .img-holder img {display: block;} .img-holder p {position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); text-align: center; color: #fff; text-shadow: 0 0 15px;}

<div> <img src="" alt=""> <p>Text Aligned Centrally Vertical &amp; Horizontal.</p> </div>

Now the <div> is an inline kinda element that you can style.

Preview:

I've added another wrapper div surrounding the img and text as well as using flex to position the text. See this codepen

HTML:

<section> <div> <img src="" /> <div>SOME TEXT</div> </div> </section> 

CSS:

@import "bourbon"; body { margin: 0px; } .height-100vh { height: 100vh; } .center-aligned { @include display(flex); @include align-items(center); @include justify-content(center); } .wrapper { position: relative; } .text { justify-content: center; align-items: center; display: flex; color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 

You also can center align text onto an image using display: inline-block; to the wrapper element.

.height-100vh { display: inline-block; position: relative; } .text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; }

<section> <img src="" /> <div>SOME TEXT</div> </section>

I added 2 more divs

<div > <img src="images/woodenbridge.jpg" alt="Wooden Bridge" /> <div> <div></div> </div> </div> 

and then styled as follows :

.flex-item { display: inline; align-self: center; } 

Responsive centered text content over image

.height-100vh { height: 100vh; background: lightgrey; } .center-aligned { display: flex; align-items: center; justify-content: center; } .background-image { opacity: .3; width: 100%; object-fit:cover; height: 100%; } .text { position: absolute; color: white; font-family: 'Gill Sans', 'Gill Sans MT'; background: darkcyan; padding: 20px; }

<section> <img src="" /> <div>I'm in center</div> </section>