Instead of using padding to position an element (text in the example), you can use CSS Flexbox (flexible box layout). A good use is when you have text in the center of a container and need it to stay centered, both horizontally and vertically, no matter what the screen size or text line breakpoint. An example of this is a page title or headline in a banner or a row with multiple columns, each with centered text of varying line lengths.
The problem with using padding to set position is that when the screen width minimizes and the text breaks to two lines, the text is no longer vertically centered.
Add the following CSS to the text element using the builder’s CSS attributes tab, or assign a class to the element if applying CSS via a stylesheet. (this method is used in the demo a little farther down on this page.
display: flex;
justify-content: center; /*horizontal alignment*/
align-items: center; /*vertical alignment*/There are times when you may need the following CSS to the parent element: (example row/column)
display: flex;
justify-content: center;
text-align:center; Demo
HTML Code
<div class="flex-parent"><p class="flex-content">Your content goes here.</p></div>CSS Code
.flex-parent
{background-color:#888888;
display: flex;
justify-content: center;
text-align: center;}
.flex-content
{min-height:500px;
display: flex;
justify-content: center; /*horizontal alignment*/
align-items: center; /* vertical alignment*/
font-size:72px;
line-height:1.0em;}How the code renders…
Your content goes here.
All Flex style properties are listed below as a reference of options.
Parent container properties
.container {
display: flex; /* or inline-flex */
}
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
.container {
flex-flow: column wrap;
} (This is the shorthand to combine direction and wrap)
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right … + safe | unsafe;
}
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + … safe | unsafe;
}
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + … safe | unsafe;
}
Properties for the Children
(flex items)
.item {
order: 5; /* default is 0 */
}
.item {
flex-grow: 4; /* default 0 */
}
.item {
flex-shrink: 3; /* default 1 */
}
.item {
flex-basis: | auto; /* default auto */
}
.item {
flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
}
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Leave a Reply