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
  • July 31, 2012 at 11:46 pm #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

      •
August 1, 2012 at 5:46 am #107136
Paulie_D
Member

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.

August 1, 2012 at 6:02 am #107137
Paulie_D
Member

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

August 1, 2012 at 11:07 am #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. :(

August 1, 2012 at 11:13 am #107146
Paulie_D
Member

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?

August 1, 2012 at 11:39 am #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.

August 1, 2012 at 11:42 am #107153
thirith
Member

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

August 1, 2012 at 11:50 am #107154
Paulie_D
Member

@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

August 1, 2012 at 12:06 pm #107157
wolfcry911
Participant

You could change things slightly like this.

August 1, 2012 at 12:17 pm #107158
Paulie_D
Member

@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.

August 1, 2012 at 12:22 pm #107160
wolfcry911
Participant

good point Paulie

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