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

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

Respostas: