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

update flexbox

Browse Source
This commit is contained in:
Stefan Feješ
2018-03-03 10:57:27 +01:00
parent 82252a5924
commit 57cb9d24a3
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/horizontal-and-vertical-centering.md → snippets/flexbox-centering.md
View File

@ -1,11 +1,11 @@
### Horizontal and vertical centering
### Flexbox centering
Horizontally and vertically centers a child element within a parent element.
Horizontally and vertically centers a child element within a parent element using `flexbox`.
#### HTML
```html
<div class="horizontal-and-vertical-centering">
<div class="flexbox-centering">
<div class="child"></div>
</div>
```
@ -13,7 +13,7 @@ Horizontally and vertically centers a child element within a parent element.
#### CSS
```css
.horizontal-and-vertical-centering {
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
@ -23,13 +23,13 @@ Horizontally and vertically centers a child element within a parent element.
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__horizontal-and-vertical-centering">
<p class="snippet-demo__horizontal-and-vertical-centering__child">Centered content.</p>
<div class="snippet-demo__flexbox-centering">
<p class="snippet-demo__flexbox-centering__child">Centered content.</p>
</div>
</div>
<style>
.snippet-demo__horizontal-and-vertical-centering {
.snippet-demo__flexbox-centering {
display: flex;
justify-content: center;
align-items: center;