Width and centering · Ancho y centrado
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página necesita un navegador reciente (con soporte para SharedArrayBuffer). Por favor, actualiza Chrome, Edge, Firefox o Safari a la última versión.
English
Width
- By default, a block box is as wide as the page.
width: 300px;makes it a fixed width instead.max-width: 600px;is gentler — at most this wide, but shrink on small screens.
Español
Ancho
- Por defecto, un bloque tiene el ancho de la página.
width: 300px;le asigna un ancho fijo.max-width: 600px;es más flexible — como máximo este ancho, pero se reduce en pantallas pequeñas.
English
Centering a box
- To center a box (not just its text), give it a width, then
margin: 0 auto;. 0 automeans no top/bottom margin, and equal left/right margins.- Equal side margins push the box into the middle.
Español
Centrar una caja
- Para centrar una caja (no solo su texto), asígnale un ancho y luego
margin: 0 auto;. 0 autosignifica sin margen superior/inferior y márgenes laterales iguales.- Los márgenes laterales iguales empujan la caja hacia el centro.
<style>
.card {
width: 280px;
margin: 0 auto;
padding: 16px;
background-color: #eef;
}
</style>
<div class="card">A centered card.</div>
English
Common mistakes
- Centre a block with a set width using
margin: 0 auto. - A width in
%is relative to the parent element.
Español
Errores comunes
- Centeriza un bloque con un ancho definido usando
margin: 0 auto. - Un ancho en
%es relativo al elemento padre.
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
Español
Tu turno
- Una caja necesita tener un ancho antes de que
margin: 0 auto;pueda centrarla. - Establece un ancho y centra la tarjeta.
Explore · Explorar
Width and the box · Ancho y la caja
Width sets the content · contenido size; padding/border/margin add around it. · El ancho establece el tamaño del contenido; el relleno/borde/márgen se añaden a su alrededor.
Give the card a fixed width. Add width: 300px; to the .card rule. · Asigne un ancho fijo a la tarjeta. Añada width: 300px; a la regla .card.
Center the card on the page. Add margin: 0 auto; to the .card rule. · Centre la tarjeta en la página. Añada margin: 0 auto; a la regla .card.