All geek questions in one place

CSS vertically aligns the LI in the middle

I have the following HTML where I need LI elements to be displayed vertically in the middle of the 21-pixel UL area. Here is my HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        .MenuBar
        {
            padding: 0px;
            border: 1px solid #036;
            height: 21px;
            font-size: 8pt;
        }
        .MenuBar li
        {
            display: inline;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <ul class="MenuBar">
        <li>Link 1</li><li>Link 2</li><li>Link 3</li></ul>
</body>
</html>

How can I modify the above HTML to achieve this effect?

+3
source share
5 answers

I assume that you are trying to make a horizontal rather than a vertical list, since you set the display type of the LI elements to "inline". So try the following:

<style type="text/css">
    .MenuBar
    {
        padding: 0px;
        border: 1px solid #036;
        height: 21px;
        font-size: 8pt;
    }
    .MenuBar li
    {
        display: inline;
        line-height: 21px;
        padding-left: 20px;
    }
</style>
+6
source

Is that what you need?

    .MenuBar li
    {
        display: inline;
        padding-left: 20px;
        line-height: 21px;
    }

Like Sarfraz, I'm not sure I fully understand the question.

+2
source

line-height:21px .MenuBar

+2

, , , , :

    .MenuBar li
    {
        display: block;
        padding-left: 20px;
    }

display block inline. .

0

- - <li /> 1- , ​​ 100% ( , <li />), . <span />, li: .

.MenuBar li:before
{
    display: inline;
    height: 100%;
    vertical-align: middle;
    content: '';
}

(21px - ). : CSS li

0

Source: https://habr.com/ru/post/1735446/

More articles:


All Articles