Center Text Over an Image in Flexbox

Center text over an image in flexbox

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 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/revision/latest?cb=20090904155448" />  <div class="text">SOME TEXT</div></section>

Center text over images with flexbox

#container {    display: inline-flex;    position: relative;      /* establish nearest positioned ancestor for abspos */    cursor: pointer;}
.centeredText {    display: none;}
#container:hover > .centeredText {    display: inline-block;    font-size: 4em;    color: white;    position: absolute;               /* remove from document flow */    left: 50%;                        /* center horizontally */    top: 50%;                         /* center vertically */    transform: translate(-50%,-50%)   /* tweak for precise centering; details:                                       http://stackoverflow.com/q/36817249 */}

<div id="container">  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg">  <div class="centeredText">text</div></div>

Center div inside image with flexbox

To place the text over the image , give absolute position to h1 element and add position relative on the container element.

Since you have set justify-content and align-items properties on the flex container to center, when text is placed over the image, it will be centered horizontally and vertically.

.uno {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

h1 {
  position: absolute;
}

<div class="uno">
  <img src="https://www.placecage.com/300/300" alt="Sample Image" />
  <h1>
    Center this text
  </h1>
</div>

Align text on top of image using flex

.container {  position: relative;}.text {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  display: flex;  align-items: center;}

<div class="container">  <img src="http://lorempixel.com/800/800/" />  <div class="text">    <p>    some text here to be vertical aligned on the left where the image starts;    </p>  </div></div>

Center text with images in flexbox

I would avoid using an extra image for spacing and just rely on justify-content: space-between

Feel free to check out my codepen (basically the same as Michaels).

http://codepen.io/anon/pen/zKmaVJ

Centering pictures and text with Flexbox

Add the following CSS to your img tags and remove the height and width attributes from them.

img {
  height: 1rem; /* Set it to your liking */
  margin-right: 10px;
  vertical-align: middle
}

This isn't a flexbox solution but will help you for sure.

Here's the codepen

https://codepen.io/faisalrashid/pen/BaBLKaB

Center text under image in flex container

Thanks to @TheVigilant for putting me on the right path:

.menu-icon-container a {
    width: auto;
    vertical-align: top;
    display: inline-flex;
    justify-content : center;
}

.menu-icon-container > img, p {
    margin: auto;
    display: block;
}

Horizontally Centering Flexbox with Image and Text

To align your text and image horizontally inside div, you could use display:flex and justify-content: center. Justify-content:center will align the children at the center of the container.

.content {  width: 400px;  display: flex;  justify-content: center;  align-items: center; /* Only if you want it vertically center-aligned as well */  background: #ccc;  padding: 40px;}

<div class="window">  <div class="content">    <img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />    <div class="textcontent">      <div class="text"> Some text that is very very long and wraps. </div>      <div class="text"> This text is also very long and also wraps. </div>    </div>  </div></div>

Center Text Over an Image in Flexbox