Help:Wiki University Flexbox - Centering Text

<< Last Chapter Next Chapter >>

Centering text - justify-content:center & align-items:center All through these lessons you may have noticed that our numbers 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 numbers or text, for that matter, centered both horizontally and vertically as well? Here are two more Flexbox codes to show:  Horizontal centering - justify-content:center  Vertical centering - align-items:center   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. Here is the coding:

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.

<h2 style="font-size:2em; background-color:#fcefcf; padding:3px; margin-top:0em">Try these out

<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; "> <div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises Copy and paste these codes for broken links in your sandbox and see if you can fix them: <div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers
 * 
 * [Missouri, United States Genealogy|Missouri]
 * &lt;a ref="https://en.wikipedia.org/wiki/Main_Page"&gt;Wikipedia&lt;/a&gt;
 * Missouri, United States GenealogyMissouri
 * [Wikipedia]
 * Missouri, United States Genealogy

<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; "> Quick Quiz
 * How can links be broken?
 * A. Too many brackets.
 * B. Not enough brackets.
 * C. Wrong kind of brackets.
 * D. No space in an external link between URL and name of link.
 * E. No pipe in an internal link between name of page and name of link.
 * F. Using the URL as the name of the link.
 * G. All of the above.

<div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px; ">Check your answers << Last Chapter Next Chapter >>