I want to float the image into the center with having the ability of writing left and right next to it, but float: center does not even exist

Osama Tawfeq 0
Viewed 25

float: center dose not even exist I tried a lot of methods, yet non of them worked. I search for a solution, and all of them were align left or right with the text on the opposite side. But there was not align center with text in both sides... So, a solution, please. Preferably writing the style in the img tag...

This is my html so far:

<img style="float: center; margin: 0px 15px 15px 0px;" src="image.png"/>
css-float alignment css html
1 Answers

So there is no float: center. However you could use float:left; on all elements. It will float left in order and if there all from a small size they will be placed next to eachother like this.

<p style="float:left;">Left</p>
<img style="float:left;" src="#">
<p style="float:left;">Right</p>

But then a again this method is really tricky and there are much better ways to structure you code and layout. Flex-boxes for example. A bit harder to understand, but once you'll get it it's very helpfull.

/*This external css is just for show*/
div{
  text-align: center; 
  border: solid 1px black;
}
<!-- This is the minimum code you'll need -->
<div style="display:flex;">
  <div style="flex:1;"> <p>BlaBla</p> </div>
  <div style="flex:1;"> <img src="#"> </div>
  <div style="flex:1;"> <p>and some more blabla</p> </div>
</div>

T-S0
Related