0

How can I get an image aligned to the left corner of the page with a centered title?

What I tried:

<div style="display: flex; height: 100px;">
    <img style="max-width: 100%; max-height: 100%;" src="static/totally_original_logo.jpg" alt="totally original logo">
    <div style="text-align: center; margin: 0 auto;">
        <a href="foo.com">Return to home</a>
        <h1>My Title</h1>
    </div>
</div>

screenshot

<div style="display: flex; height: 100px; justify-content: center;">
    <img style="max-width: 100%; max-height: 100%;" src="static/totally_original_logo.jpg" alt="totally original logo">
    <div style="text-align: center;">
        <a href="foo.com">Return to home</a>
        <h1>My Title</h1>
    </div>
</div>

enter image description here

What I want: enter image description here

sushi
  • 274
  • 1
  • 4
  • 13

1 Answers1

-1

Keep justify-content: center on the div tag and give the img a justify-self: start property. You may need to give the div a width of 100% as well.

img {
justify-self: start;
}
div {
width: 100%;
}
Brian Aderer
  • 654
  • 5
  • 4
  • Hi thanks for your answer, however adding these did not get me the desired output. It ends up looking like the first picture. I didn't downvote your answer, I'm guessing it's the same person that marked my Question as a duplicate. The other post has an excellent answer using columns or hidden elements to achieve what I wanted. Thanks for responding though! – sushi Jul 28 '22 at 14:58