andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
snippets/display-table-centering.md
View File

@ -5,6 +5,13 @@ tags: layout,intermediate
Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`).
- `display: table` on '.center' allows the element to behave like a `<table>` HTML element.
- 100% height and width on '.center' allows the element to fill the available space within its parent element.
- `display: table-cell` on '.center > span' allows the element to behave like an <td> HTML element.
- `text-align: center` on '.center > span' centers the child element horizontally.
- `vertical-align: middle` on '.center > span' centers the child element vertically.
- The outer parent ('.container' in this case) must have a fixed height and width.
```html
<div class="container">
<div class="center"><span>Centered content</span></div>
@ -30,12 +37,3 @@ Vertically and horizontally centers a child element within its parent element us
vertical-align: middle;
}
```
#### Explanation
- `display: table` on '.center' allows the element to behave like a `<table>` HTML element.
- 100% height and width on '.center' allows the element to fill the available space within its parent element.
- `display: table-cell` on '.center > span' allows the element to behave like an <td> HTML element.
- `text-align: center` on '.center > span' centers the child element horizontally.
- `vertical-align: middle` on '.center > span' centers the child element vertically.
- The outer parent ('.container' in this case) must have a fixed height and width.