- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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.
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.
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