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 lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"> Quick Quiz

A. True B. False
 * You can see all the stuff on this page on your smart phone just as you see it here?

A. True B. False
 * When viewing this page on your smart phone, you do not have to scroll to see all the width?

A. On the right of TOC. B. Under the MAIN PAGE. C. Under the TOC. D. None of the above.
 * Where might you see the SIDEBAR on your smart phone?

A. True B. False
 * The reason for Flexbox is to allow a page to be seem more easily on a tablet.

<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 >>