¿Cómo alinear verticalmente elementos <li> en <ul>?

96

Tengo una horizontal <ul>y necesito centrar cada una <li>en ella verticalmente. Mi marcado está debajo. Cada uno <li>tiene un borde, y necesito que los elementos, así como su contenido, estén en el medio verticalmente. Por favor ayuda; Soy nuevo en 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
fuente

w3schools.com/css/css_navbar.asp : sé que esto ha sido respondido, pero en caso de que alguien mire esto de ahora en adelante, lo encontré útil

— JabbaWook

75

Supongo que, dado que está utilizando una declaración XML, no se preocupa por IE o navegadores antiguos.

Entonces puedes usar display:table-celly me display:table-rowgusta:

<?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
fuente

1

gracias, esto funciona parcialmente. es decir, el contenido de las cajas traseras está centrado, pero ¿cómo puedo centrar las cajas?

— Akonsu

no, no, la mitad de la lista. en este ejemplo particular, la última casilla debe ser menor que las tres primeras.

— Akonsu

@akonsu: lo cambié, aunque no lo probé en nada más que en FireFox. Avísame si encaja.

— Richard JP Le Guen

1

Richard, muchas gracias por tu ayuda. No conocía estos tipos de pantallas. desafortunadamente, no son compatibles con IE7. Encontré una manera de alinear el contenido de cada <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html, pero parece que no hay una forma cruzada de navegador para alinear <li> dentro de <ul>. ..

— akonsu

1

Si está apuntando a IE7, ¿por qué tiene una <?xml?>declaración? Todas las versiones de IE no son compatibles con XHTML. Creo que es posible que deba leer Enviar XHTML como texto / html Considerado perjudicial: hixie.ch/advocacy/xhtml

— Richard JP Le Guen

75

Aquí hay uno bueno:

Establecer line-heightigual a lo que sea height; ¡Funciona de maravilla!

P.ej:

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

— vadear
fuente

1

¿Puedes elaborar con un pequeño ejemplo?

— Leigh

1

Perfecto - altura de línea: 30px; en flotado <li> era lo que necesitaba (Chrome)

— GuruBob

1

¿Qué pasa si se divide en dos líneas?

— Mahesh

1

Sí, viable solo con no más de una línea de texto.

— Wanny Miarelli

1

Esto es lo único que funcionó para mí. Otras respuestas no funcionaron.

— adev

34

Puedes usar flexbox para esto.

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

Puede encontrar una explicación detallada de cómo usar flexbox aquí .

— dimmech
fuente

4

Yo tuve el mismo problema. Prueba esto.

<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
fuente