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

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

@@ -0,0 +1,62 @@
---
title: Center an Image Using Text Align Center
localeTitle: Centrar una imagen usando el centro de alineación de texto
---
## Centrar una imagen usando el centro de alineación de texto
Un elemento `<img>` es un elemento en línea (muestra el valor del `inline-block` ). Se puede centrar fácilmente agregando el `text-align: center;` Propiedad CSS al elemento padre que lo contiene
Para centrar una imagen usando `text-align: center;` debe colocar `<img>` dentro de un elemento de nivel de bloque, como un `div` . Dado que la propiedad `text-align` solo se aplica a los elementos de nivel de bloque, coloca `text-align: center;` en el elemento de nivel de bloque de envoltura para lograr un `<img>` centrado horizontalmente.
### Ejemplo
```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>
```
**Nota:** El elemento padre debe ser un elemento de bloque. Si no es un elemento de bloque, debe agregar `display: block;` Propiedad CSS junto con la propiedad `text-align` .
```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)
## Documentación
[**alineación de texto** - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
[**\\ ** - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)