Como faço para centralizar uma imagem horizontalmente em bootstrap?

Ao desenvolver qualquer aplicativo, as imagens desempenham um papel vital no aprimoramento de sua representação visual. No entanto, essas imagens devem ter layout e alinhamento adequados. Para alinhar as imagens, o “IMG-FLUID","Float-esquerda", e "direito de flutuação”As aulas podem ser usadas. Mais especificamente, para centrar alinhar a imagem, o “Centro de texto" e a "MX-AUTO D-block”As aulas são utilizadas.

Este artigo explicará como centralizar uma imagem horizontalmente em bootstrap.

Pré -requisito: Adicione uma imagem

Em HTML, adicione uma imagem usando o “”Tag seguindo as instruções fornecidas:

• > Adicione um “" elemento.
• Dentro desta tag "", adicione uma imagem usando o "” elemento com os atributos "SRC", "Width" e "Alt".
• O "src”Define o caminho da imagem.
• O "largura”Ajusta o tamanho da imagem.
• O "alt”Especifica o texto alternativo, caso a imagem não possa carregar.

Html

Saída

Como centralizar uma imagem horizontalmente em bootstrap usando a classe "Centente de texto"?

O bootstrap “Centro de texto”Centro de classe alinha as imagens. Esta classe tem um CSS predefinido “alinhamento de texto”Propriedade com o valor“Centro”Isso ajuda a definir o alinhamento central de uma imagem horizontalmente.

Exemplo

Atribua o “Centro de texto”Classe para o pai“”Elemento como mostrado aqui:

Saída

Como centralizar uma imagem horizontalmente em bootstrap usando a classe "MX-AUTO D-Block"?

O "MX-AUTO"Em combinação com o"D-bloco”Classe, alinha a imagem no centro. O "MX-AUTO" é o CSS "margem”Propriedade com o valor“auto", E a propriedade" D-Block "é o CSS"mostrar”Propriedade com o valor“bloquear”.

Exemplo

Vamos implementar as classes "MX-AUTO" e "D-Block" para o elemento "" e ver o efeito:

Saída

Dessa forma, você pode centrar uma imagem horizontalmente em bootstrap.

Conclusão

Para centralizar uma imagem horizontalmente em bootstrap, primeiro, crie um arquivo html e adicione uma imagem usando o “" marcação. Atribua a ele os atributos necessários, como “src","alt","largura" e mais. Adicione o "Centro de texto”Classifique o elemento pai da imagem para ajustar o alinhamento central da imagem. O "MX-AUTO”Classe, em combinação com a“D-bloco”Classe, também pode ser usada para esse fim. Este artigo explicou como centralizar uma imagem horizontalmente usando o bootstrap.