O que faz o auto na margem: 0 auto?
auto
em margin:0 auto;
?
Não consigo entender o que faz. Sei que às vezes tem um efeito de centralizar objectos. Obrigado.
6 answers
Quando tiver especificado um width
no objecto a que tenha aplicado margin: 0 auto
, o objecto irá sentar-se centralmente dentro do seu contentor-mãe.
Especificando auto
como o segundo parâmetro basicamente diz ao navegador para determinar automaticamente as margens esquerda e direita em si, o que faz definindo-as igualmente. Garante que as margens esquerda e direita serão ajustadas para o mesmo tamanho. O primeiro parâmetro 0 indica que as margens superior e inferior serão ambas ajustadas para 0.
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
Portanto, para lhe dar um exemplo , se o pai é 100px e o filho é 50px, então a propriedade auto
irá determinar que há 50px de espaço livre para partilhar entre margin-left
e margin-right
:
var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;
Que daria:
margin-left:25;
margin-right:25;
Olha para isto. Não tem de indicar a largura do pai, apenas a largura do objecto-filho.
Auto: o navegador define a margem. O resultado disso depende do navegador
Margem: 0 indica automaticamente
* top and bottom margins are 0
* right and left margins are auto
A partir da especificação CSS em calcular as larguras e margens para o nível de bloco, elementos não substituídos no fluxo normal:
Se tanto "margem-esquerda "como" margem-direita "forem " auto", os seus valores utilizados são iguais. Isto centraliza horizontalmente o elemento em relação às bordas do bloco contendo.
margin:0 auto;
0
é para cima e para esquerda e direita. Isso significa que a margem esquerda e direita tomará margem automática de acordo com a largura do elemento e a largura do recipiente.
Geralmente, se quiser colocar qualquer elemento na posição central, então margin:auto
funciona perfeitamente. Mas só funciona em blocos.
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
0 é para cima e auto para esquerda-direita. O navegador define a margem.
É uma marca quebrada/muito difícil de usar em substituição da marca" center". É útil quando você precisa de mesas quebradas e não-centragem para blocos e texto.