How to create space between image and centering text in html fragment-CodePudding

I'm trying to figure out how to create spacing between an image and text for a header type fragment and am not coming up with anything that works as needed. (not sure if it being a fragment matters or not - I'm an html novice at best)

What I would like is to have the image display/anchor on the far left side and the header text in the center. The current code below has the image where I want it to be, but the text follows right after which I see why because there are no attributes stating what to do with that text, hence this reaching out seeing I am not sure what to do for that.

I've tried using hspace and that pulled the image over to the right along with the text. Plus other examples I referenced did not speak to what I am looking to do.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
    <header th:fragment="header">
        <br/>
        <h1> <img th:src="@{/images/my_logo.png}">My Header Text</h1>
    </header>
</body>
</html> ```

Any suggestion is greatly appreciated.

Thank you.

CodePudding user response：

Just apply a margin-right to the image:

h1>img {
  margin-right: 40px;
  vertical-align: middle;
}

<h1> <img src="https://picsum.photos/id/1/200/300">My Header Text</h1>

Note: I added vertical-align: middle; here to vertically center-align the text with the image.