Comment puis-je faire apparaître mon texte au centre de cette DIV à la fois vétiquement et horizontalement?

J'ai besoin pour centrer le texte verticalement et horizontalement. Est-il un moyen simple de faire cela pour le code suivant?

<div style="display: block; height: 25px;">
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);">
        Basic
    </span>
</div>

source d'informationauteur Rubin

  1. 16

    Vous pouvez utiliser le text-align bien centrer le texte horizontalement, et line-height égale à la hauteur de la div au centre des éléments inline verticalement.

    <div style="display: block; height: 25px; text-align:center; line-height:25px;">
    <span id="ctl_txt" style="background-color: rgb(255, 0, 0);">Basic</span>
</div>

    Exemple ici.

  2. 5

    Une autre façon pour ce faire, différentes de @Jose, est d'utiliser

    display:table; et display:table-cell

    comme ce

    div{
    display:table; 
    height:125px;  //JUST FOR SHOW
    width:125px;   //JUST FOR SHOW
}

span{
    background-color: rgb(255, 0, 0);
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

    Puis vertical-align:middle; et text-align:center; faire le travail.

    Exemple: http://jsfiddle.net/jasongennaro/unfwL/1/