2

I'm trying to center an image inside an h1 tag and I'm missing something and don't know what it is

https://jsfiddle.net/jbzt38Le/5/ you can find a demo right over here but I will explain anyways

inside my html I have a div like this

        <div>
            <h1>
                <span>Load clients:</span> <br/>
                <span><img src="https://i.ibb.co/tMb04W4/ok.png" alt="logo"></span>
                <span>Step 2: Ok </span>
            </h1>
        </div>

and over the css i manage to arrange the image size like this

        div > h1 > span > img {
            max-width: 10%;
            height: auto;
        }

But now, the image (or text) is not centered with the other. sadly I can't use flexbox because it's and email template and not all the providers are supporting flex at the moment :( What am I missing?

Andres
  • 101
  • 6
  • If I'm understanding your intent correctly you could just do `h1 {display: flex;text-align: center;}` since `display:flex` will display the children as a row by default, then `text-align` will center your image. However it's generally not good semantics to use a header tag as a parent to images. Oh and your `
    ` tag appears intentional, which will of course interact in ways also. Maybe an example of what you want it to look like?     – Chris W. Dec 23 '21 at 16:43
  • You mean vertical or horizontal center? Check flexbox: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox – Raven Murphy Dec 23 '21 at 16:44

2 Answers2

0

You can use the image as background image and then center it with: margin: 0 auto;

div > h1 > span > img {
  max-width: 10%;
  height: auto;  
}
div {
  text-align: center;
}

.ci {
    background: url(https://i.ibb.co/tMb04W4/ok.png) no-repeat center center;
    background-size:100px;
    height: 100px;
    width: 100px;
  display:block;  
  margin: 0 auto;
}
<div>
  <h1>
     <span>Load clients:</span> <br/>
     <span class="ci"></span>
     <span>Step 2: Ok </span>
  </h1>
</div>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
-1

Just add text-align:center to the h1 like that:

div > h1 > span > img {
        max-width: 10%;
        height: auto;
  
    }
h1 {
  text-align:center;
}
Ali Mamedov
  • 125
  • 1
  • 11