How to vertically align the child elements of a box.
Syntax
box-align: start | end | center | baseline | stretch ;
start - For normal direction boxes, place the top edge of each child is along the top of the box. For reverse direction boxes, place the bottom edge along the bottom edge.
end - For normal direction boxes, place the bottom edge of each child is along the bottom of the box. For reverse direction boxes, place the top edge of each child along the top of the box.
center - Divide any extra space is evenly, with half above and half below the child.
baseline - If box-orient is inline-axis or horizontal, place all children with their baselines aligned.
stretch - Stretch the child elements to fill the containing block
Examples:
h1 { box-align: start; }
.emw3class { box-align: center; }
#emw3id { box-align: baseline; }
Try it:
This is a sample of text with a CSS border. The border helps to display the position of the text DIV. |
(CSS 3) Browser Support: None, use the equivalent -moz-box-align for Firefox and -webkit-box-align for Safari, Opera, and Chrome.
“Property is intended to serve life, and no matter how much we surround it with rights and respect, it has no personal being. It is part of the earth man walks on. It is not man” ~ Martin Luther King, Jr.
Related:
box-align - MDN Web Docs.
box-direction - The direction in which children of a box are displayed.
box-flex - Whether the children of a box are flexible or inflexible in size.
box-ordinal-group - Display order of the child elements of a box.
box-orient - Position child elements horizontally or vertically.
box-pack - Define the horizontal or vertical position or a box.