Sobre centralização horizontal de elementos HTML

1. Centralize o div horizontalmente

1. Especifique a largura do elemento e centralize automaticamente as margens esquerda e direita

.center{
   width:100px;
   margin-left:auto;
   margin-right:auto;
  }

2. O bloco embutido implementa o método de centralização horizontal

        Para definir o atributo text-align como "center" no contêiner pai do elemento

.parent{
     text-align: center; 
 }

.parent li{
          display :  inline-block;
           display inline;
  }

        Desvantagens: É necessário processamento adicional de compatibilidade de navegador de bloco embutido.

3. Método flutuante para obter centralização horizontal

        É preciso determinar o percentual do genitor para conseguir o efeito na sentença

.parent{
     float: left;
     width:100%; 
     overflow: hidden;
     position: relative;
 }
.parent li{
           float: left;
            width:50%;
          position: relative;
}

4. CSS3 flex implementa método de centralização horizontal

  exibição: flexível; 

   justificar-conteúdo:centro; 

5. fit-content é um novo valor de atributo adicionado ao atributo “largura” em CSS

 width: -moz-fit-content;
 width:-webkit-fit-content;
 width: fit-content;
 margin-left: auto;
 margin-right: auto;





Acho que você gosta

Origin blog.csdn.net/weixin_38791717/article/details/80179850
Recomendado
Clasificación