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

Question

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"/>

Answer 1

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>