How to center image to text?

Asked

Viewed 799 times

1

I would like to use the image centered on the text, but I could only align it left or right.

It has how to center it, making the text involve the whole image?

The code I made is below:

<style>
body{
margin:0 auto;
background:#FFF;
}
div{
margin:0 auto;
height:auto;
width:400px;
background:#CCC;
}
img{
width:100px;
height:auto;
float: right;  /* OU float: left; que alinha a esquerda */
padding: 5px;
}
</style>
<body>

<div>
Aldous Huxley publicou o seu Brave New World em 1932. George Orwell, que não tinha em grande conta este livro ou o seu autor, publicou 17 anos depois a sua própria distopia, Nineteen Eighty-Four. Entre estas duas datas interpôs-se a Segunda Grande Guerra: não admira que na primeira a técnica básica da opressão do Estado fosse a manipulação genética e que na segunda, depois do descrédito em que o regime nazi lançou o eugenismo, as técnicas principais da opressão sejam a lavagem ao cérebro, a crueldade gratuita e a manipulação da linguagem.
Apesar desta e de outras diferenças, os dois textos foram muitas

<img src="upload/logotipo.png" />

vezes lidos, nas décadas seguintes, como os dois pólos - um hedonista, outro o oposto disto - duma mesma distopia, a que os sinais dos tempos davam e dão plausibilidade. Esta distopia bipolar é identificável em grande parte com a ideia de modernidade; e hoje a invocação da modernidade, sempre na boca dos políticos e dos capitães da indústria, soa aos nossos ouvidos tanto a ameaça como a promessa.
 </div>
 </body>

Thanks in advance for the attention of friends.

html css

  • Dude, float is not exactly the best way to line up. ?

  • I didn’t understand very well what C wants not to. In case there just put one text-align: center in div and take out the float of the image.

  • I will edit the question, and include the full html. I want to get the image wrapped around the text, that is, the image centered in the middle of the text.

  • You want a part of the text above, the image below in the middle and the rest of the text below the image ? Or you want text, image, text, one on the other ?

  • Thanks guys, but I found out where I’ve seen what I’m up to! It was in Word, in it we can insert an image and position it where we want inside the text, including in the center, with the text involving the whole image. But thanks so much for the attention, I will study a way to do something similar. Hugs to all.

  • Related1: https://answall.com/questions/268701/texto-contortion-imagem-div-redonda/268718#268718 Related2: https://answall.com/questions/203108/contor-imagem-com-texto-em-css/328705#328705

  • Behold this flexbox guide, or this guide in Portuguese.

Show 2 more comments

3 answers

0

I entered the following code in the tag img and almost solved his problem, just not very well centralized;

...
img {
  width:100px;
  height: auto;
  padding: 5px;
  /* Código para centralizar a imagem */
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
...

Exemplo de como ficou

I believe that with some adjustments you can reach the expected result.

-3

Comrade, take the float off that tag <img>, and put a text-align:center on that tag <div> that holds the text and the image that will solve this problem.

-3

You can include margin:0 auto; in css for the image and take the float.

img{
width:100px;
height:auto;
margin:0 auto;
padding: 5px;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.