Member Avatar for hwoarang69

i want to move image 5px up so it is equal to text.

<div id='top_login'>
        <h1>InSecure Checkout</h1> <img id="lock_img" src="IMAGE/lock.png" width="25px" height="25px"/>
</div>

problem with this code this that it prints

**Insecure checkout**
                  |image|

i fixed this problem by using css:

position:absolute;
    right:300px;
    top:240px;

but that the problem is that when i resize the window. my postion are missed up.
is there a way to do this with out missed it when i resize window.

Edited by hwoarang69
  • 2 Contributors
  • 3 Replies
  • 55 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Good call getting this working with 's hint — that explains why your absolute placement stopped jumping around. Absolute positioning can solve a one-off layout, but it is fragile when the page resizes because it takes the element out of the document flow. Two simple, responsive fixes that avoid absolute coordinates:

Use flexbox on the container to keep the heading and icon on the same line and vertically centered:

#top_login {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#top_login img {
  height: 1em;
  width: auto;
}

Or make the heading and icon inline-level and use vertical alignment (good for older browsers):

#top_login h1 { display: inline-block; margin: 0; vertical-align: middle; }
#top_login img { display: inline-block; vertical-align: middle; height: 1em; }

Quick tips: reset the default h1 margins if spacing looks off. If you only need a tiny nudge (for example, 5px), use a small translate on the image (transform: translateY(-5px)) instead of absolute positioning. Also keep the icon accessible: give it a meaningful alt or aria-hidden="true" if decorative. These approaches will keep things stable across window sizes.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

You can still use absolute positioning, but if you want to position it within the Div, you must set the parent element (in this case "top_login") to have a position of relative. If you dont, the image's abosolute positioning will be that of the body element.

Member Avatar for hwoarang69

i see so just set top_login to postion of relative

Member Avatar for JorgeM

Glad to see that worked for you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.