154 lines
3.4 KiB
Markdown
154 lines
3.4 KiB
Markdown
---
|
|
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.
|
|
|
|
### 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)
|
|
|
|
### Horizontal Align
|
|
The `margin` property will create space around an element. Use the `auto` value to equally distribute remaining space on either side.
|
|
|
|
```css
|
|
.horizontal-center {
|
|
margin: auto;
|
|
}
|
|
```
|
|
|
|
`Block` elements must have a `width` set to avoid filling the viewport:
|
|
|
|
```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 & Vertical Align](https://www.w3schools.com/css/css_align.asp)
|