Como alinhar verticalmente <li> elementos em <ul>?

96

Eu tenho uma horizontal <ul>e preciso centralizar cada uma <li>nela verticalmente. Minha marcação está abaixo. Cada <li>um tem uma borda e eu preciso que os itens, bem como seu conteúdo, fiquem no meio verticalmente. Por favor ajude; Eu sou novo em CSS.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar li
        {
            border: solid 1px black;
            display: block;
            float: left;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar li.button
        {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

css

— Akonsu
fonte

w3schools.com/css/css_navbar.asp - eu sei que isso foi respondido, mas caso alguém olhe para isso de agora em diante, achei isso útil

— JabbaWook

75

Presumo que, como você está usando uma declaração XML, não está se preocupando com o IE ou navegadores mais antigos.

Então você pode usar display:table-celle display:table-rowgostar:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

— Richard JP Le Guen
fonte

1

obrigado, isso funciona parcialmente. ou seja, o conteúdo das caixas traseiras é centralizado, mas como faço para centralizar as próprias caixas?

— akonsu

não, não, no meio da lista. neste exemplo específico, a última caixa deve ser inferior às três primeiras.

— akonsu

@akonsu - Eu mudei, embora não tenha testado em nada além do FireFox. Deixe-me saber se isso se encaixa.

— Richard JP Le Guen

1

Richard, muito obrigado por sua ajuda. eu não sabia sobre esses tipos de tela. infelizmente, eles não são compatíveis com o IE7. Eu encontrei uma maneira de alinhar o conteúdo de cada <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html, mas parece não haver uma maneira cruzada de navegadores para alinhar <li> dentro de <ul>. ..

— akonsu

1

Se você está direcionando o IE7, por que tem uma <?xml?>declaração? Todas as versões do IE realmente não suportam XHTML. Acho que você precisa ler Sending XHTML as text / html Considered Harmful: hixie.ch/advocacy/xhtml

— Richard JP Le Guen

75

Aqui está um bom:

Defina line-heightigual a tudo o que heighté; Funciona como um encanto!

Por exemplo:

li {
    height: 30px;
    line-height: 30px;
}

— vadear
fonte

1

Você pode elaborar com um pequeno exemplo?

— Leigh

1

Perfeito - altura da linha: 30px; no flutuante <li> era o que eu precisava (Chrome)

— GuruBob

1

O que acontece se estiver dividido em duas linhas?

— Mahesh

1

Sim, viável apenas com no máximo uma linha de texto.

— Wanny Miarelli

1

Esta é a única coisa que funcionou para mim. Outras respostas não funcionaram.

— adev

34

Você pode usar o flexbox para isso.

ul {
    display: flex;
    align-items: center;
}

Uma explicação detalhada de como usar o flexbox pode ser encontrada aqui .

— dimmech
fonte

4

Eu tive o mesmo problema. Experimente isso.

<nav>
    <ul>
        <li><a href="#">AnaSayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

@charset "utf-8";

nav {
    background-color: #9900CC;
    height: 80px;
    width: 400px;
}

ul {
    list-style: none;
    float: right;
    margin: 0;
}

li {
    float: left;
    width: 100px;
    line-height: 80px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
}

nav li a {
    width: 100px;
    text-decoration: none;
    color: #FFFFFF;
}

— HesapAdam
fonte