¿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

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

Respuestas: