Align an image within <a> and <h1>

Help
1

Here’s my Companions clique. From there, you can find my hidden 13th Doctor shrine by clicking on the pixel 13th Doctor. But as you can see, she isn’t aligned with the other characters, despite trying this:

h1 {
  text-align: center;
}
h1 >img {
  vertical-align: middle;
}
h1 >a {
  vertical-align: middle;
}

How do I line her up with the other characters?

1 Like
2

The anchor tag surrounding your 13th Pixel Doctor is adding an extra 14 pixels of height, probably for underlining and outlines.

If you want a quick and dirty fix, without having to deal with Flexbox, here’s what I’d do:

  1. Wrap “a Whovian text clique” in a <span> element so that you have <span>a Whovian text clique</span>.
  2. Add padding-top: 14px; to your h1 > a CSS rule.
  3. Add h1 > span, h1 > img { padding: 14px 0; } to your stylesheet.

This should ensure that everything’s vertifically centered, but at the price of extra whitespace above and below. You can compensate for that by adjusting the margin for h1 in your stylesheet.

PS: I tested all of this by using Firefox dev tools on your site and editing stylesheet properties in my copy of your page.

3

Hmm… didn’t work for me. I’ve tried putting span around pixel Thirteen and using padding-bottom: 0; too. Didn’t work either.

4

You’re sure you uploaded everything?

That wasn’t part of my suggestion, though. I wonder if you might need to use Flexbox for this after all.

5

I tried again. Followed the suggestion exactly as written. Still not working. :frowning:

Guess I do need flexbox.

6

Seems ok just to change

h1 >img {
    vertical-align: middle;
}

to

h1 img {
  vertical-align: middle;
}

> is for “direct children” and is not needed in many cases.

7

I’ve been trying different things with flexbox but not sure how to make it work…

8

She looks aligned to me, is it supposed to look different from what I see?

image
image1367×499 62.3 KB

9

Interesting. I’ll look once I’m at a desktop.

Edit: Yep, everything looks fine now.