Como mover o texto ao redor uma imagem com html ou css

Mova texto à volta de uma imagem com HTML ou CSS

Mova texto à volta de uma imagem com HTML ou CSS

Quando você incluir uma foto com o texto na sua página Web, o estilo padrão exibe o gráfico acima ou abaixo o conteúdo circundante, deixando espaço em branco à esquerda e à direita da imagem. Este espaço resíduos e faz a imagem aparecer desarticulada a partir de seu texto. Para corrigir isso, você tem a opção de usar qualquer HyperText Markup Language (HTML) ou Cascading Style Sheets (CSS) para especificar o posicionamento da imagem para que o texto envolve em torno das fronteiras da imagem. Use HTML ou CSS para mover texto em torno de suas imagens, como você preferir.

HTML

Inicie o arquivo de página no programa de editor de texto do seu computador e posicione o cursor dentro do "" tag. Tipo "alinhar =" e siga esta com aspas, exemplo:

Entrar "certo," "esquerda," "meio," "topo" ou "inferior" após a entrada align para especificar onde a sua imagem aparece em relação ao seu texto. UMA "topo" alinhamento torna o seu conteúdo aparecer no ponto mais alto da sua imagem, a "meio" move o texto para o meio da fotografia e do "inferior" dirige o conteúdo para começar na parte inferior do gráfico. Além disso, uma "certo" posição, move seus dados à esquerda da imagem e um "esquerda" alinhamento coloca conteúdo à direita da imagem. Escreva seu código da seguinte forma:



Salve o arquivo.

CSS

Video: Curso de HTML5 - 09 - Imagens em HTML5 - by Gustavo Guanabara

Coloque o cursor dentro do "" tag e tipo "style =" com um conjunto de aspas antes do último colchete angular. Ilustrar:

Entrar "flutuador:" dentro das aspas e digite o "esquerda" ou "certo" atributo para citar o alinhamento do gráfico. o "esquerda" valor torna a sua imagem aparecer na esquerda e move o texto para a direita, enquanto o "certo" atributo faz o oposto. Por exemplo:

Salve o documento.

Video: CSS Labs #1 - Efeito Hover FigCaption CSS

Referências

  • ligação W3Schools: HTML atributo align
  • ligação W3Schools: Propriedade CSS Float
  • ligação W3Schools: CSS Como

Sobre o autor

Brandy Alexander tem escrito profissionalmente desde 2001. Ela é uma artista de vidro com um design Web e fundo escrita técnica. Alexander tem seu próprio negócio arte de vidro e tem sido um contribuinte para "Revista de vidro da Linha" bem como várias publicações online.


Artigos relacionados