Como faço para centrar elementos flutuados?

No CSS, o “flutuador”A propriedade é adicionada para definir o alinhamento horizontal dos elementos. No entanto, esta propriedade oferece o restante dos elementos para envolvê -la, para que os elementos apenas flutuem na direção direita e esquerda do corpo pai.

No HTML, os elementos flutuados se referem a elementos fora do fluxo normal do conteúdo, mas ainda parte dele. A posição do elemento flutuado é ajustada usando o “esquerda" e "certo”Propriedades. No layout CSS, flutuar os elementos diretamente no centro não é possível. Portanto, podemos definir sua margem para alcançar a funcionalidade desejada.

Este artigo discutirá como o centro flutuou elementos em html.

Como centralizar os elementos flutuados?

Para centralizar o elemento flutuado em html, primeiro, adicione um elemento e atribua uma classe “Centro de flutuação”:

Classe de estilo “center”

.Float-Center
Largura: 150px;
Altura: 150px;
Background-Color: #1C6758;
Posição: Absoluto;
Esquerda: 50%;
TOP: 50%;

O "Centro de flutuação”A classe é estilizada com as seguintes propriedades:

• ““largura”Recebe um valor para determinar a largura.
• ““altura”Recebe um valor para determinar a altura.
• ““cor de fundo”Ajusta o fundo do elemento.
• ““posição”Propriedade com a“absoluto”O valor aloca a posição do elemento em relação ao
• ““esquerda”É utilizado para definir a borda da margem esquerda do elemento.
• ““principal”Ajusta a posição vertical do elemento.

Saída

Pode ser observado na saída dada que o "" não está na posição central exata. Vamos ajustar a posição do elemento div definindo o “margem”Propriedade da seguinte maneira:

margem -esquerda: -75px;
Margin -top: -75px;

Aqui:

• ““margem-esquerda”Ajusta a área de margem no lado esquerdo do elemento. O valor negativo agregado o coloca mais perto do elemento pai.
• ““margin-top”Especifica a margem negativa no topo como“-75px”.

Saída

Pode -se ver que centralizamos com sucesso o elemento div flutuado usando CSS.

Conclusão

Para colocar os elementos flutuados no centro, o importante é definir sua posição. Os elementos posicionados são retirados do fluxo do documento. Então, para ajustar seu alinhamento, as propriedades incluindo o “margem-esquerda","Margem-direita","margin-top", e "Margin-Bottom”Pode ser utilizado. Este post ilustrou o procedimento sobre como centralizar elementos flutuados.