Member Avatar for absticles

Hi there.

I'm having an issue with my class/id selectors.

This is the code I am currently using within the HTML.

<div id="my-login-bar">
<img class="logoutimage" src="img/icon-logout.png" />
<a class="loggingout" href="LOCATION">log out</a>
</div>

LOCATION is the equivalent of some PHP code I have in there.

In my CSS file the #my-login-bar has a position and width etc. However at the moment the image with the class .logoutimage sits too high beside the link. But when I change the margin-top or padding-top in the .logoutimage it also pushes around the link. And vice versa when I try altering the margin-top or padding-top in the class .loggingout for the link.

Can anyone help?

Thanks,
Abi

  • 3 Contributors
  • 5 Replies
  • 107 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short diagnosis tied to the replies: the icon and the link are being laid out as inline-level content, so their vertical alignment is controlled by the line box and the baseline. That is why nudging one element with padding/margin also shifts the other. and were right that absolute positioning can fix the position, and reducing unnecessary markup helps, but there are simpler and more robust options.

Modern, minimal fix (recommended): make the bar a flex container so the icon and link are vertically centered without fiddling with offsets.

#my-login-bar {
  display: flex;
  align-items: center;    /* center icon and text vertically */
  gap: 0.5rem;            /* spacing between icon and link */
  justify-content: flex-end; /* optional: push group to the right */
}
#my-login-bar img { height: 20px; }

Classic fallback if you do not want flexbox: set the inline items to align to the middle of the text line.

#my-login-bar img,
#my-login-bar a { vertical-align: middle; }

Short troubleshooting checklist:

  • Inspect computed display, line-height, and vertical-align in devtools to see which box is causing the shift.
  • If using absolute positioning, ensure the container has position: relative so child offsets are predictable.
  • Make the icon a known height (or display:block) so it scales consistently with the text.
  • Add alt text for the image and preserve keyboard focus/contrast for the link.

See MDN for a concise Flexbox primer and the vertical-align behavior: Flexbox guide and vertical-align.

Recommended Answers

All 5 Replies

Member Avatar for almostbob

margins, padding, doesnt work
try position relative to/from something fixed (in this example the bottom of my-login-bar)
something to try
my-login-bar is set for dimensions and position, elements inside my-login-bar can be set relative to my-login-bar

.logoutimage { top:auto;bottom:3px;left:3px;right:auto;}
.loggingout { top:auto;bottom:3px;left:auto;right:3px}

one is set relative to left bottom, the other set realtive to right bottom
to align the items just change anything not set "auto" and shift em round

Edited by almostbob because: n/a
Member Avatar for Member #120589

Forget your classitis:

<div id="my-login-bar">
<img src="img/icon-logout.png" />
<a href="LOCATION">log out</a>
</div>

This just takes out all those presentation-only attributes - unless you're using them as hooks for js??

Using AB's CSS:

#my-login-bar img { top:auto;bottom:3px;left:3px;right:auto;}
#my-login-bar a { top:auto;bottom:3px;left:auto;right:3px}
Edited by Member #120589 because: n/a
commented: tight, clean, the obvious answer AFTER you point it out +4
Member Avatar for almostbob

like it, v.clean (no wasted 'anything')

Member Avatar for absticles

Thanks for the help, managed to fiddle with it a bit and got it working.

Member Avatar for Member #120589

Great! Are we solved?

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.