Uma opção alternativa para o margin: 0 auto
é utilizar o margin-inline: auto
. O efeito é o mesmo.
1º opção: margin: 0 auto
div {
margin: 0 auto;
}
2º opção: margin-inline: auto
div {
margin-inline: auto;
}
Uma opção alternativa para o margin: 0 auto
é utilizar o margin-inline: auto
. O efeito é o mesmo.
1º opção: margin: 0 auto
div {
margin: 0 auto;
}
2º opção: margin-inline: auto
div {
margin-inline: auto;
}
Vale lembrar que nem sempre será equivalente. margin-inline
trata apenas dos valores das margens esquerda e direita, enquanto margin
também trata das margens superior e inferior.
Ou seja, se eu precisar ter uma margem superior e inferior diferente de zero, como por exemplo:
div {
margin: 50px auto;
}
Aí somente margin-inline
não é suficiente, eu precisaria fazer algo como:
div {
margin-inline: auto;
margin-top: 50px;
margin-bottom: 50px;
}
Outra diferença é que margin-inline
é afetado pela direcionalidade do texto. Por exemplo, se eu tiver:
div {
writing-mode: vertical-lr;
margin-inline: auto;
}
A div
não é mais centralizada no meio da linha, veja.
Mas se eu usar:
div {
writing-mode: vertical-lr;
margin: 0px auto;
}
A div
continua centralizada, veja.
otima adição maninho!