CSS: alignment

CSS syntax:

text-align: left|right|center|justify|initial|inherit;

---

justify-content: 

normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]

where

<content-distribution> = space-between | space-around | space-evenly | stretch

<overflow-position> = unsafe | safe

<content-position> = center | start | end | flex-start | flex-end

//The justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

 

align-items: stretch | center | flex-start | flex-end | baseline | initial|inherit;

//the alignments for all the items of the flexible <div> element

//The align-items property specifies the default alignment for items inside the flexible container.
//Use the align-self property of each item to override the align-items property.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

 

align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;

//modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

//align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. 

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

 

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

//the alignments for one of the items inside a flexible element

https://developer.mozilla.org/en-US/docs/Web/CSS/align-self

---

float: none|left|right|initial|inherit;

//Note: Absolutely positioned elements ignores the float property!

//Note: Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.

---

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

---

HTML syntax:

The align attributes of these HTML are not supported in HTML5. Use CSS instead. 

<p align="right">

<object align="left|right|middle|top|bottom">

<img align="left|right|middle|top|bottom">

<div align="left|right|center|justify">

<table align="left|right|center"> 

<td align="left|right|center|justify|char">

---

 

MDN document: CCS box Alignment https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment

CSS Box Alignment