Question

I´m trying to set the height of the “li” which has “display:inline” as css.
I know inline elements resets the height but I need it to be display:inline just to text align center the list.

this is my css:

li{
    font-size: 28px;
    border-right: 1px solid #b9b9b9;
    margin-right: 15px;
    padding-right: 15px;
    line-height: 40px;
    display: inline;
    text-align: center;
    color: #ffffff;
}

I need to fix the height to show the border height according to the text height, this is what is happening now:

Any ideas to workaround this? remember, I need the display inline to text align center the lists over the ul.

If there is other way to text-align:center the lists also would help I think…

Answer 1

inline doesn’t respect paddings or margins this way. You should use display: inline-block which does:

http://jsfiddle.net/hBz7G/1/