How to center image to text?

0

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

Can you centralize it by having the text wrap around the 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>

I thank you for the attention of your friends.

    
asked by anonymous 28.09.2015 / 20:35

4 answers

0

I inserted the following code into the img tag and almost solved your problem, it just did not go very well centralized;

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

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

    
17.11.2018 / 10:17
-1

Comrade, drop the float of this <img> tag, and put a text-align: center in the <div> tag that contains the text and image that will solve this problem.

    
04.03.2016 / 14:53
-2

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

img{
width:100px;
height:auto;
margin:0 auto;
padding: 5px;
}
    
28.09.2015 / 23:30
-2

An example:

.centralizado{
    margin: auto;
    width: 90%;
    padding: 0px;
    border:0px;
    vertical-align: top;
}

The secret is on the border.

    
05.06.2018 / 16:42