Forums

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

Home Forums CSS Vertical aligning divs in li's?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #187006
    AndrewK
    Participant

    I want a nav bar with an li that has text and a div thats aligned vertically to the middle. Basically, I want a bit of text and then an arrow next to it.
    Any ideas?

    Thanks!

    http://codepen.io/anon/pen/upfDv

    #187008
    Paulie_D
    Member

    You have the li as display:table when, I feel, they should be display:table-cell

    http://codepen.io/Paulie-D/pen/jgGHn

    Is there any reason why you can’t just give #box a 20px top margin?

    Only that you are committing yourself to hard-coding something that you might have to change later if the height of the cell changes.

    Avoiding fixed px values should avoided IMO for proper responsiveness if other, more flexible/dynamic, options are available.

    It’s probably not something you can always avoid…but this is certainly one instance where you can.

    #187011
    AndrewK
    Participant

    Just what I wanted!
    Only one issue though, when I float #box to the left to put some text after the #box it just loses its alignment.

    #187012
    Paulie_D
    Member

    Floating is incompatible with vertical-align…so perhaps just add another div to hold the text inside the cell?

    In fact, if all you are doing is adding an ‘arrow’ you could use a pseudo-element.

    Or don’t use ‘table-cell’ at all..use inline-block instead

    http://codepen.io/Paulie-D/pen/LxiJc

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