Como mover o texto ao redor 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