Width and centering · Largura e centralização
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
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.
Português
Largura
- Por padrão, uma caixa block é tão larga quanto a página.
width: 300px;a torna de largura fixa em vez disso.max-width: 600px;é mais flexível — no máximo esta largura, mas encolha em telas pequenas.
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.
Português
Centralizando uma caixa
- Para centralizar uma caixa (não apenas seu texto), dê a ela uma largura, então
margin: 0 auto;. 0 autosignifica nenhuma margem top/bottom, e margens left/right iguais.- Margens laterais iguais empurram a caixa para o meio.
<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.
Português
Erros comuns
- Centre um bloco com uma largura definida usando
margin: 0 auto. - Uma largura em
%é relativa ao elemento pai.
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
Português
Agora você tenta
- Uma caixa precisa de uma largura antes que
margin: 0 auto;possa centralizá-la. - Defina uma largura, depois centralize o cartão.
Explore · Explorar
Width and the box · Largura e a caixa
Width sets the content · conteúdo size; padding/border/margin add around it. · Width define o tamanho do content · conteúdo; padding/border/margin adicionam ao redor.
Give the card a fixed width. Add width: 300px; to the .card rule. · Dê ao card uma largura fixa. Adicione width: 300px; à regra .card.
Center the card on the page. Add margin: 0 auto; to the .card rule. · Centralize o card na página. Adicione margin: 0 auto; à regra .card.