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. If the height of the items were the same as the text inside, you would not necessarily see a change in vertical centering.

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 NOTE: Centering has been problematic at best, but now is a snap with Flexbox.

Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> Exercises

<p style="font-size:1.3vw">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.

<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

<div style="border-top:1vw solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> 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 >>