Vertically aligning a list

HTML-CSS
1

Greetings,

I recently completed my first challenge (Tribute Page) and ran into an obstacle where I couldn’t find a solution. I have a list centered horizontally using “text-align: center” but I also wanted the list aligned vertically. Can somebody nudge me in the right direction so that I can figure this out please? Any help is appreciated.

I can’t link my codepen because I just created the account but my username there is also CitrineDragon

2

Hello,
Can you share your code pls

3

I can’t link to my pen due to limitations of a new account but my profile name is CitrineDragon.

4

you can use :
vertical-align:

5

His pen is at https://codepen.io/CitrineDragon/pen/JxRoLK

font size 1.1vw? Really? I’m old, dude!!

1 Like
6

exp:
html code :

<div>
  Une <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" />
  image alignée par défaut.
</div>
<div>
  Une <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
  image alignée avec text-top.
</div>
<div>
  Une <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
  image alignée avec text-bottom.</div>
<div>
  Une <img class="pourcentage" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
  image alignée avec 200%.
</div>
7

css code :

img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.pourcentage  {
  vertical-align: 200%;
}
8

That’s originally what I tried to use after searching for an answer but it doesn’t change the layout of the list. It’s possible that I made a mistake elsewhere.

9

verify your class tag that they are same declared on css code

10

when you say “aligned vertically”, you mean in reference to what exactly? Are you trying to position it side-by-each with the photo, and centered vertically on the photo?

11

i apologize, I am still quite new and I was trying to get a responsive text size and that looked good on my display. I’ll make some changes.

12

lol totally fine, I was teasing more than anything. Just that, on most displays, that will be a very very small type. I forked it and upsized it to 1.8vw so I could read it. :wink:

13

I want the list aligned horizontally in the center and I want the vertical alignment so that the bullet points line up vertically. Does that make sense?

14

nope. Sounds like you still want horizontal alignment. Are you meaning something like this:

FCC%20Tribute%20Page
FCC%20Tribute%20Page705×509 34.9 KB

15

Yeah that is correct and yeah it would be horizontal alignment.

16

lol ok, so that wasn’t a huge change to make that happen. Basically, you have those in a ul tag, which is a block-level container (like a div for lists!), so we can style that:

#yummy ul {
  ...
}

That selector gets you any ul element in the div with the id yummy. So what styles do you need? You want the text to be left-aligned, and you want that to have a margin to push it in, both left and right.

Quick margin shorthand:

margin: 0 30px;

is the same as saying:

margin: 0 30px 0 30px;

which is the same as saying:

margin-top: 0;
margin-right: 30px;
margin-bottom: 0;
margin-left: 30px;

And in that order. If margin: gets two values, it’s top/bottom, then left/right; if four values, then they’re top, right, bottom, left.

2 Likes
18

Thanks, that helps a lot!

As a follow up question, how can I make the margin responsive to the size of the device it’s being seen on?

Edit: I set margin: 0 40%; and it seems to work reasonably well except when the screen is reduced is size by a large amount. Thanks for your help.