How come my image is not aligned to the right of the header in my HTML code?

My attempt to align an image to the right side of my heading using code was unsuccessful. Here is the HTML snippet I used:

/* Aligning with 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>

Despite implementing this code, the image appeared below the heading instead of on its right side as intended.

https://i.stack.imgur.com/11BLZ.jpg

htmlcsshorizontal-alignment

Answer №1

Ensure the display flex is applied to the parent container, not the image itself;

I have simplified the CSS and also adjusted the HTML structure. The parent tag is now an anchor (link) with the text as 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>

Answer №2

It seems like there is an issue with how you are applying the display: flex property.

I have made some adjustments to your code for better alignment, please review:

#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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

javascripthtmlcssformsanimation

Ways to effectively hide one window or pop-up upon clicking another

I am working on creating an interactive website for my close circle of friends and family. One of the key features is to have a button that displays their biography when clicked. What I'm aiming for is that when a different bio is selected, the previo ...

javascriptjqueryhtml

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

When I click the toggle button on a small screen, my navbar items appear below the search bar instead of aligning with the home and about elements. Below is an image depicting this issue: https://i.stack.imgur.com/4rabW.png Below is the HTML code structu ...

javascripthtmltwitter-bootstrap

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml

Can someone assist me with positioning an HTML child element to appear behind a parent element using CSS?

I need help displaying an HTML element behind a fixed header in my webpage. I want the div element (which is a child of the header) to appear beneath the header like a dropdown menu. However, I've tried adjusting the z-index and position properties wi ...

htmlcss

What is the best way to switch the site header in JavaScript or jQuery?

I have created a Bootstrap menu design and I am looking to add a sliding functionality to it. My goal is to hide the menu when scrolling down and display it when scrolling up (slide-down / slide-up). For implementing this feature, I plan to utilize jQuery ...

javascripthtmljquerybootstrap-4

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

javascriptcss

The overflow scroll feature seems to be malfunctioning and not working as intended in the

I'm trying to implement the overflow scroll property in a div to display a scroll bar for the user, but I'm facing issues. I'm unsure what the problem could be. The code I'm working with can be found here : http://fiddle.jshell.net/Gg ...

htmlcssoverflow

Cursor vanishes until mouse movement detected (Chrome browser)

In the HTML page I created, the mouse cursor is initially set to none. However, there are certain circumstances where I need it to switch to crosshair. The issue I am facing is that the cursor does not appear unless the user moves the mouse. If the mouse r ...

htmlcss

invoking a JavaScript function from an HTML file

I want to create a JavaScript server on Raspbian that not only serves .html content to the browser but also allows for user input through events like button clicks. Both my .html and .js files are located in the same directory, and I have used absolute pat ...

javascripthtmlnode.jswebserver

What separates $(document).ready() from embedding a script at the end of the body tag?

Can you explain the distinction between running a JavaScript function during jQuery's $(document).ready() and embedding it in the HTML within script tags at the bottom of the body? Appreciate your insights, DLiKS ...

javascriptjqueryhtml

How can you apply an active class using React-Router?

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

cssreactjstypescriptreact-routerreact-router-dom

There was an issue retrieving the value from the $.ajax() error function, as it returned [

After successfully receiving data from the input field and sending it to the database, everything seems to be working fine. However, when attempting to retrieve the data after sending it to the database, an error is encountered: [object HTMLInputElement]. ...

javascriptjqueryhtmlajax

What is the process for calculating the total sum of input values utilizing JavaScript?

My JavaScript skills are not perfect, and I'm struggling to calculate the total sum of values in the amount input boxes without refreshing the page. Can someone assist me with this challenge? Thank you. function Calculat ...

javascripthtml

Using embedded js files in jQuery's .load() function does not function properly

In the index.html file, I have the code snippet below: <div id="page-insert"></div> function openPage(pageid) { $('#page-insert').load(pageid); } openPage('testpage.html'); Additionally, there are script files embedde ...

javascriptjqueryhtmlajax

The CSS styling of Vuetify TreeView does not support text wrapping

I'm having trouble getting the long text in this CodePen snippet to break and wrap properly. It extends off screen, rendering the append button unclickable. I've experimented with various CSS rules but haven't found a solution yet. Check ou ...

cssvue.jsvuetify.js

PHP is unable to match a CAPTCHA code with the string entered by the user

I've developed a login system along with a CAPTCHA string that randomly generates characters in the form A1B2C3, containing uppercase and lowercase letters. Below is the code snippet: $cArr1 = array_merge(range("a", "z"), range("A", "Z")); $cArr2 = r ...

phphtmlstringcaptcha

Displaying truncated title text

Would it be feasible to display clipped text (overflow: hidden) in a way that is fully readable when hovered over? An attempt like this: div:hover { overflow: visible; background-color: yellow; } results in the text overlapping, making it impossible ...

htmlcsshoveroverflow

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

jqueryhtmlcsswordpress

Guide to modifying the text color of a Primefaces/jqPlot line chart:

I've implemented a basic JSF line chart with PrimeFaces (using jqPlot library) in my project: <p:lineChart id="linear" value="#{team.chart}" title="Lap Times" xaxisLabel="Lap" yaxisLabel="Time ...

cssjsfprimefacesjqplot