Help:Wiki University Flexbox - Centering Text

<< Previous Chapter Next Chapter >>

Centering text - justify-content:center & align-items:center All through these lessons you may have noticed that the text in each box is in the upper left hand corner. This is the normal default position for anything place in a container, which in this case, is a colored box. But what if we want the text centered both horizontally and vertically as well? Here are two more Flexbox codes to show:

Here is the coding:
 * Horizontal centering - justify-content:center
 * Vertical centering - align-items:center

Main Page Research Help Wiki Page Get Involved
 * NOTICE to use these centering elements, you need to include "display:flex in the code for each element.
 * NOTICE since our items have a height of 100 pixels, the align-items:center has an effect.

Here is the coding: You can use one or both depending on the size of the container.  Main Page Research Help Wiki Help Get Involved If you only want to center horizontally and not vertically, leave out align-items:center. NOTE: Centering has been problematic at best, but now is a snap with Flexbox.

Try these out

 Exercises

1. Create a row of five boxes and put these five titles in the center of each box horizontally, not vertically. Item 1 Item 2 Item 3 Item 4 Item 5 2. Create a row of five boxes and put these five titles in the center of each vertically, not horizontally. 3. Create a row of five boxes and put these five titles in the center of each box both vertically and horizontally.

Check your answers

 Quick Quiz

<p style="font-size:1.3vw">1. You have to include "display-flex" in order to center items in a box A. True B. False 2. To place a title in the center vertically, you use "justify-content:center" A. True B. False 3. To place a title in the middle horizontally, you use "justify-content:middle." A. True B. False

<div style="width:12.5vw; height:30px; padding-top:3px; padding-left:1vw; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers

<< Previous Chapter Next Chapter >>