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;
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.