Why my image isn't aligned to the right of the heading in html?

Question

I tried aligning my image next(right side) to my heading . With the following code. The following html code for element:

/* And Tried to Align using css */

#colorlib-logo img {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
}

#colorlib-logo h1 {
  margin-right: 3px;
  margin-left: 0px;
}

#colorlib-logo {
  width: 300px;
}

<h1 id="colorlib-logo"><a href="">HaamTheLord</a><img src="" alt="logo" /></h1>

This Code Displays the image below the heading .But I Want The Image To be Displayed To right of the text

Please consider providing a helpful alt text for users with disabilities like visual impairments. f.e. `alt="Logo, resembles a checkmark in a blue, seal-like form".` — Andy, Jun 10 '22 at 13:14

Simp4Code · Answer 1 · 2022-06-10T15:00:00.613

2

So you put the display flex on the image, it needs to go on the parent;

I've changed up the CSS a lot and made it simpler. I also changed the HTML markup, I made the parent tag an anchor (link) and the text is now the H1

#colorlib-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#colorlib-logo h1 {
  font-size: clamp(1rem, 4vw, 4rem);
  margin: 0 0.5rem 0 0;
}

<a href="#" id="colorlib-logo">
  <h1 href="">HaamTheLord</h1>
  <img src="" alt="logo" height="30" width="30" />
</a>

edited Jun 10 '22 at 15:00

answered Jun 10 '22 at 12:54

Simp4Code

1,394
1
2
11

This again aligns the image below the text but to the right side – HaamTheLord Jun 10 '22 at 14:04
@HaamTheLord Wait really? It looks fine to me – Simp4Code Jun 10 '22 at 14:18
@HaamTheLord can you give me a link to the site where you’re applying this? There must be some other styles affecting it — you can see if you run the code snippet on my answer it works – Simp4Code Jun 10 '22 at 14:20
The site - https://haamthelord1.github.io/love/ if You're Viewing it on mobile click on top-left menu bar to view the problem – HaamTheLord Jun 10 '22 at 14:32
@HaamTheLord I updated the CSS in my snippet a little bit, the heading needed to have a responsive font size. Let me know if this helps – Simp4Code Jun 10 '22 at 15:00
I'll try it and update u the results:) – HaamTheLord Jun 10 '22 at 15:05
It's not working , it enlarges the image and reduced the text size. check it https://haamthelord1.github.io/love – HaamTheLord Jun 10 '22 at 15:10
Add the width and height properties directly on the img tag — see my HTML – Simp4Code Jun 10 '22 at 15:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/245496/discussion-between-haamthelord-and-simp4code). – HaamTheLord Jun 10 '22 at 15:36

score 1 · Answer 2 · edited Jun 10 '22 at 13:11

1

You're applying display: flex property incorrectly.

I have made some changes to your code, please check:

#container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#colorlib-logo img {
  width: 30px;
  height: 30px;
}

#colorlib-logo h1 {
  margin-right: 3px;
  margin-left: 0px;
}

#colorlib-logo {
  width: 300px;
}

<div id="container">
  <h1 id="colorlib-logo"><a href="">HaamTheLord</a></h1>
  <img src="https://i.stack.imgur.com/11BLZ.jpg" alt="logo" />
</div>

edited Jun 10 '22 at 13:11

Andy

4,783
2
26
51

answered Jun 10 '22 at 12:58

r121

2,478
8
25
44

It's great but the image isn't resized because you have called #colorlib-logo img but haven't mentioned an id for that image. So ```

HaamTheLord

``` Will It Work? – HaamTheLord Jun 10 '22 at 14:19
As i reduced the size, the image again went to the bottom right of the text :( – HaamTheLord Jun 10 '22 at 14:34

Why my image isn't aligned to the right of the heading in html?

2 Answers2

HaamTheLord