¿Cómo puedo posición lapso de texto de modo que se coloca en el centro (vertical y horizontalmente). He hecho un jsfiddle ejemplo y este es mi código:

<ul>
    <li class="one"><span>One</span></li>
    <li class="two"><span>Two</span></li>
</ul>

css:

ul {
    height: 200px;
    border: 1px solid #000;
    width: 200px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

li {
    height: 30px;
    width: 100%;
    position: absolute;
    background-color: blue;
}

.one {
    top: 30px;
    height: 50px;
}

.two {
    top: 150px;
}

li span {
    color: #fff;
    vertical-align: middle;
    height: 100%;
    display: block;
}

La altura de la li puede variar. Lo anterior es sólo una referencia fija alturas.

InformationsquelleAutor xylar | 2013-02-15

5 Comentarios

  1. 0

    Trate de usar text-align: center; en el li span, y usted tendrá que establecer el margen superior respectivamente para cada conseguir abajo desde la parte superior.

    • La adición de text-align: center;, junto con un line-height, hizo el truco.
  2. 3

    Que usted necesita para establecer line-height a la misma altura que su li:

    li span {
        color: #fff;
        vertical-align: middle;
        height: 100%;
        display: block;
        line-height:30px;
    }
    li.one span{
        line-height:50px;
    }

    He aquí la demostración: http://jsfiddle.net/r4Dr9/2/

    • Esta es una solución. Pero no muy buena, si me preguntan. ¿Qué pasa si la lis altura es dinámico?
    • Si la altura es dinámico debe tener un enfoque diferente. Usted necesita para establecer el li como display:table y la span como display:table-cell. El vertical-align:middle debe trabajar entonces. He aquí la demostración: jsfiddle.net/r4Dr9/5
  3. 1

    No necesitas hacer trucos con margen o de relleno.

    Dar la <li> un display:table;, y el <span> un display:table-cell;.

    DEMO

    CSS para agregar

    li {
        text-align:center;
        display:table;
    }
    
    li span {
        display:table-cell;
        vertical-align:middle;
    }
    • cabe señalar que esto no funciona con IE7-
    • a quien le preocupa el IE7?
  4. 0

    Un par de cosas. En primer lugar, height:100%;, vertical-align:middle; no hace nada. También, con width:100%; y no especificando text-align, que tendrá siempre por defecto a la izquierda. Me gustaría hacer un uso personal de relleno:

    li span {
        display:inline-block;
        color: #fff;
        text-align:center;
        height: 100%;
    }
    
    .one span {
        padding-top:10px;
    }
    
    .two span {
        padding-top:3px;
    }

    He actualizado su jsFiddle así.

  5. 0

    Estilo añadido – «texto-align: center’ en el elemento de li y trabajó para mí

Dejar respuesta

Please enter your comment!
Please enter your name here