Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to set middle vertical align for item in li?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #39154
    thirith
    Member

    Hi all, I have a list that contain div as child item. I want to set the vertical align to item in side the

  • show middle in the list.
    I set vertical-align: middle but nothing happen. How could I do that? Is there any magic for this?
    My code:






    • item 1

    • item 2 line 1
      item 2 line2




#107136
Paulie_D
Moderator

Although you CAN put divs inside list items under HTML5 it’s not recommended.

Is there a reason why you are doing it?

If you want a two line list item there is no reason you can’t add a (br) tag.

#107137
Paulie_D
Moderator

Anyway, the traditional way of vertically aligning text is to set the line-height to the same as the containing element.

With a double line items such as you are trying, you just have to change the line-height to something more appropriate.

Here you go: http://codepen.io/Paulie-D/pen/avpKm

#107145
thirith
Member

Thanks Paulie_D, I thought about too, but it would not work in my case because. it will have multiple lines for some content. :(

#107146
Paulie_D
Moderator

Content? I thought we were talking about list items. Anyway, the example I worked up had multiple lines. What were you after?

Could you make an example of what you are after from what I have started. One caveat though, try to avoid divs in list items.

It doesn’t matter if what you make doesn’t work, at least we can establish what you are after.

Even better, do you have an image of your proposed design?

#107150
wolfcry911
Participant

@Paulie_D, why are divs in lis not recommended? It’s valid in html 3, 4, and 5. I agree that they’re not needed here and add unnecessary markup.


@thirith
, you could give this a try. It may not work in IE 7, IIRC all that is needed is a height on the li to fix it.

#107153
thirith
Member

Hi wolfcry911, thanks a lots. it works. Can we make it as columns instead of row like that?

#107154
Paulie_D
Moderator

@wolfcry911 Just my understanding…perhaps I’m wrong. As you say, the fact is that they are necessary so adding additional markup is the downside.


@thirith
I updated my example…is that what you were after? http://codepen.io/Paulie-D/pen/avpKm

#107157
wolfcry911
Participant

You could change things slightly like this.

#107158
Paulie_D
Moderator

@wolfcry911 That’s nice. It would be nice to try it without the need for break tags though. In fact, I think it will.

Hang on…http://codepen.io/Paulie-D/pen/rjGFo. Yep, of course you could add the breaks in if you need them.

#107160
wolfcry911
Participant

good point Paulie

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.