gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Update packages and fix local dev (#26907)

Browse Source 
<!-- Please follow this checklist and put an x in each of the boxes, like this: [x]. It will ensure that our team takes your pull request seriously. -->

- [x] I have read [freeCodeCamp's contribution guidelines](https://github.com/freeCodeCamp/freeCodeCamp/blob/master/CONTRIBUTING.md).
- [x] My pull request has a descriptive title (not a vague title like `Update index.md`)
- [x] My pull request targets the `master` branch of freeCodeCamp.
This commit is contained in:
Stuart Taylor
2018-10-23 14:18:46 +01:00
committed by mrugesh mohapatra
parent 153e1c9f38
commit 7da04a348b
341 changed files with 17836 additions and 1026 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
mock-guide/english/html/tutorials/center-an-image-using-text-align-center/index.md Normal file
View File

@@ -0,0 +1,60 @@
---
title: Center an Image Using Text Align Center
---
## Center an Image Using Text Align Center
An `<img>` element is an inline element (display value of `inline-block`). It can be easily centered by adding the `text-align: center;` CSS property to the parent element
that contains it.
To center an image using `text-align: center;` you must place the `<img>` inside of a block-level element such as a `div`.
Since the `text-align` property only applies to block-level elements, you place `text-align: center;` on the wrapping block-level element to achieve a horizontally centered `<img>`.
### Example
```html
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>
```
**Note:** The parent element must be a block element. If it is not a block element, you should add ```display: block;``` CSS property along with the ```text-align``` property.
```html
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>
```
**Demo:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
## Documentation
<a href='https://developer.mozilla.org/en-US/docs/Web/CSS/text-align' target='_blank' rel='nofollow'>**text-align** - MDN</a>
<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img' target='_blank' rel='nofollow'>**\<img\>** - MDN</a>