center tag interfering with image-CodePudding

I have this particular HTML code. I want the "ironman" image to appear on left but the 'center' tag is interfering with it. Is there any way to make the image appear on left instead of center without moving it outside the div?

<center>
    <div >
        <div >
            <img  data-aos="zoom-in" src="assets/ironman.png">
        </div>
        <div >
          <div >
            <h2>ABC</h2>
            <p>ABC</p>
            <p>ABC</p>
          </div>
        </div>
    </div>
</center>

CodePudding user response：

this happens because the center tag set the text-align property to center so that forces all divs to center its content, and the code below just overrides this behaviour

<div  style="text-align: left;">

important Note it is not a best practice to use center tag since it has been deprecated long time ago,

CodePudding user response：

I think you should first remove center tag this will place your image on Left side of webpage by default

<div >
        <div >
            <img  data-aos="zoom-in" src="assets/ironman.png">
        </div>
        <div >
          <div >
            <h2>ABC</h2>
            <p>ABC</p>
            <p>ABC</p>
          </div>
        </div>
    </div>

CodePudding user response：

<div >
    <div >
        <div >
            <img  data-aos="zoom-in" src="assets/ironman.png">
        </div>
        <div >
          <div >
            <h2>ABC</h2>
            <p>ABC</p>
            <p>ABC</p>
          </div>
        </div>
    </div>
</div>

and

.center{
  display: flex;
  align-items: center;
  justify-content: center;
}

this is the best way to center it all

CodePudding user response：

center tag is deprecated in html5

use css instead

.flip-card .flip-card-inner {
  display: flex;
  justify-content: center;
}

<div class='wrap'>
  <div >
    <div >
      <img  data-aos="zoom-in" src="assets/ironman.png">
    </div>
    <div >
      <div >
        <h2>ABC</h2>
        <p>ABC</p>
        <p>ABC</p>
      </div>
    </div>
  </div>
</div>