Para alinhar imagens em seu site, o ideal é criar antes as classes na folha de estilos. Isso simplifica o trabalho porque um alinhamento bem feito nunca tem apenas uma propriedade. Quando você flutua uma foto à esquerda, por exemplo, precisa também definir as margens direita e inferior para que o texto não fique grudado à imagem.
.CSS
Para flutuar à esquerda:
.left {float:left; margin-left:0; margin-right:10px; margin-bottom:5px;}
Para flutuar à direita:
.right {float:right; margin-right:0; margin-left:10px; margin-bottom:5px;}
Para centralizar:
.center {float:none; display:block; margin-left:auto; margin-right:auto;}
<HTML>
Exemplo de imagem centralizada:
<img alt="Descreva a imagem" class="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9bpT3dtFizfpANzrxxDr0hyphenhyphens1Iohw5cjcXB1tzcCpYtFG0PC2HwD1dgUH0FLKpcY3KDxy5k5BAM7HTeCmnSUaP_jSvd4Dst7ZuT8ssq6zb4rjOrJKi84YndB-Zej0qoavnun43YYUNJ-/s145/200px-Web-browser-openclipart.svg[5].png"/>
Exemplo de imagem flutuando à direita:
<img alt="Descreva a imagem" class="right" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9bpT3dtFizfpANzrxxDr0hyphenhyphens1Iohw5cjcXB1tzcCpYtFG0PC2HwD1dgUH0FLKpcY3KDxy5k5BAM7HTeCmnSUaP_jSvd4Dst7ZuT8ssq6zb4rjOrJKi84YndB-Zej0qoavnun43YYUNJ-/s145/200px-Web-browser-openclipart.svg[5].png"/>
Exemplo de imagem flutuando à esquerda:
<img alt="Descreva a imagem" class="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9bpT3dtFizfpANzrxxDr0hyphenhyphens1Iohw5cjcXB1tzcCpYtFG0PC2HwD1dgUH0FLKpcY3KDxy5k5BAM7HTeCmnSUaP_jSvd4Dst7ZuT8ssq6zb4rjOrJKi84YndB-Zej0qoavnun43YYUNJ-/s145/200px-Web-browser-openclipart.svg[5].png"/>
Mais de uma imagem centralizada:
<div class="center"><img alt="Descreva a imagem" alt='Imagem centralizada à direita' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9bpT3dtFizfpANzrxxDr0hyphenhyphens1Iohw5cjcXB1tzcCpYtFG0PC2HwD1dgUH0FLKpcY3KDxy5k5BAM7HTeCmnSUaP_jSvd4Dst7ZuT8ssq6zb4rjOrJKi84YndB-Zej0qoavnun43YYUNJ-/s145/200px-Web-browser-openclipart.svg[5].png"/> <img alt="Descreva a imagem" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9bpT3dtFizfpANzrxxDr0hyphenhyphens1Iohw5cjcXB1tzcCpYtFG0PC2HwD1dgUH0FLKpcY3KDxy5k5BAM7HTeCmnSUaP_jSvd4Dst7ZuT8ssq6zb4rjOrJKi84YndB-Zej0qoavnun43YYUNJ-/s145/200px-Web-browser-openclipart.svg[5].png"/></div>
Você pode:
- Mudar os nomes das classes, cuidando para mudar tanto na folha de estilos quanto no código HTML.
- Acrescentar outras declarações às classes.
- Usar essas mesmas classes para centralizar ou flutuar outros elementos em bloco. Exemplos: <iframe>, <video>, <audio> e <object>.
Até mais!
Foto: Astrologia Cármica
Muito bom, me ajudou demais! Muitíssimo obrigado!
ResponderExcluirQue bom! :)
ExcluirPesquisei em vários sites e nenhum me ajudou tanto quanto esse aqui. Muito obrigado seu conteúdo é muito bom!
ResponderExcluir