add align properties and code samples (#31396)

guide/english/css/layout-horizontal-and-vertical-align/index.md

@@ -2,14 +2,152 @@
 title: Layout Horizontal and Vertical Align
 ---
 ## Layout Horizontal and Vertical Align
+CSS has properties that create space both around and inside an element. You will use one, or a combination of these properties to create layouts.
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/layout-horizontal-and-vertical-align/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Properties Used To Create Layouts
+You will use the following properties to align elements and create layouts:
+- [margin](https://guide.freecodecamp.org/css/margins/)
+- [position](https://guide.freecodecamp.org/css/css-position)
+- [float and clear](https://guide.freecodecamp.org/css/layout/float-and-clear)
+- [text-align](https://guide.freecodecamp.org/css/text-align)
+- [padding](https://guide.freecodecamp.org/css/padding)
+- [line-height](https://guide.freecodecamp.org/css/text)
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### Horizontal Align
+The `margin` property will create space around an element. Use the `auto` value to equally distribute remaining space on either side.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+```css
+.horizontal-center {
+  margin: auto;
+}
+```
 
-#### More Information:
+`Block` elements must have a `width` set to avoid filling the viewport:
-<!-- Please add any articles you think might be helpful to read before writing the article -->
 
+```html
+<div class="square horizontal-center"><div>
+```
 
+```css
+.square {
+  width: 250px;
+  height: 250px;
+  background-color: tomato;
+}
+.horizontal-center {
+  margin: auto;
+}
+```
+`Inline-block` elements, such as an `<img>`, can be aligned by setting the `display` property to `block`.
+
+```html
+<img src="image.jpg" alt="image">
+```
+
+```css
+img {
+  display: block;
+  width: 250px;
+  margin: auto;
+}
+```
+
+Use the `position` property and set left and right location of the element.
+
+```html
+<div class="left-square"><div>
+<div class="right-square"><div>
+```
+```css
+.left-square {
+  position: absolute;
+  left: 100px;
+  width: 250px;
+  height: 250px;
+  background-color: tomato;
+}
+.right-square {
+  position: absolute;
+  right: 100px;
+  width: 250px;
+  height: 250px;
+  background-color: tomato;
+}
+```
+Send an element to the right, or left of the page using the `float` property.
+
+```css
+img {
+  float: right;
+}
+```
+
+```css
+img {
+  float: left;
+}
+```
+
+Remember floated items are removed from the normal flow. You will need to  [clear](https://guide.freecodecamp.org/css/layout/float-and-clear/) your items to get the proper layout.
+
+Text can be aligned by setting the parent element's `text-align` property.
+
+```css
+div {
+  text-align: center;
+}
+```
+
+### Vertical Align
+Using `margin` there isn't an `auto` property to vertically align elements. You will set the distance unit for `margin-top` and/or `margin-bottom` properties.
+
+```css
+img {
+  margin-top: 100px;
+  width: 250px;
+  height: 250px;
+}
+```
+
+The same applies when using the `position` property.
+```css
+img {
+  position: absolute;
+  top: 100px;
+  width: 250px;
+  height: 250px;
+}
+```
+
+Aligning child elements can be done by setting the parent element's `padding`.
+
+```html
+<div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+</div>
+```
+
+```css
+div {
+  padding: 100px 0;
+}
+```
+
+For text, set the `line-height` to the parent element's height for a center alignment.
+
+```html
+<div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+</div>
+```
+
+```css
+div {
+  height: 250px;
+  line-height: 250px;
+}
+```
+
+#### Encouraged Reading:
+- MDN Web docs: [CSS Layouts](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)
+- w3schools: [CSS Layout - Horizontal &amp; Vertical Align](https://www.w3schools.com/css/css_align.asp)