Problème aligne verticalement du texte d'un élément qui s'étend sur deux lignes

Je veux aligner du texte dans le milieu de mon élément l'aide de CSS. C'est mon balisage:

<div id="testimonial">
    <span class="quote">Some random text that spans two lines</span>
</div>

Et le CSS:

#testimonial {
    background: url('images/testimonial.png') no-repeat;
    width: 898px;
    height: 138px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    padding: 0px 30px 0px 30px;
}

.quote {
    font-size: 32px;
    font-family: "Times New Roman", Verdanna, Arial, sans-serif;
    vertical-align: middle;
    font-style: italic;
    color: #676767;
    text-shadow: 1px 1px #e7e7e7;
}

Habituellement pour obtenir .quote dans le milieu vertical de #testimonial, je le ferais:

.quote { line-height: 138px; }

Mais cela casse la mise en page parce que le texte en .quote s'étend sur plus d'une ligne.

Comme vous pouvez le voir j'ai essayé de faire vertical-align: middle; et que cela ne fonctionne pas.

Toute aide est appréciée. Des acclamations.

double possible de Comment faire pour aligner le texte verticalement ?
Non, line-height ne fonctionne pas dans ce cas car mon texte est plus qu'une ligne.
Ce n'est pas une bonne double. L'on a accepté la réponse est à l'aide de line-height, ce qui n'est pas bon pour plusieurs lignes. Le display: table-cell réponse est là, mais il n'a pas d'explication et pas de upvotes.
La "meilleure" façon est d'utiliser/d'imiter un tableau (que ce soit dans le balisage ou en CSS à l'aide de table-cell) et puis sur set pour afficher valign="middle". Mais elle est sale. Oh si sale.
Vous avez raison - mais il y a beaucoup de choses à choisir. Permettez-moi d'en trouver un autre.

OriginalL'auteur Josh | 2011-05-30

  1. 16

    Je récemment découvert verticale de centrage de quelque chose qui a pas défini les dimensions va très bien avec vertical-align: middle; en combinaison avec line-height: 0;.

    Découvrez ce démonstration de violon.

    HTML:

    <div id="testimonial">
    <span><span class="quote">Some random text<br />that spans two lines</span></span>
</div>

    CSS:

    #testimonial {
    background: #333 url('images/testimonial.png') no-repeat;
    width: 898px;
    height: 138px;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    padding: 0 30px 0 30px;
    line-height: 138px;
}
#testimonial>span {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}
.quote {
    font-size: 32px;
    font-family: "Times New Roman", Verdanna, Arial, sans-serif;
    font-style: italic;
    color: #676767;
    text-shadow: 1px 1px #e7e7e7;
    line-height: 32px;
}
    C'est très bien... vraiment.
    Très élégant 🙂
    Dans le cas où vous ne pourriez pas le faire fonctionner sous IE, essayez d'utiliser de simples doctype html5, comme <!DOCTYPE html>. J'ai trouvé que ça ne fonctionne pas en dire en utilisant laid XTHML doctype.

    OriginalL'auteur NGLN

  2. 2

    que personne ne lui répondit avec la cellule de tableau encore trouvé de solution..

    ici vous allez avec un un IE6/7 solution aussi (même s'il implique un yukky HTML hack) @thirtydot dit dans les commentaires, le tableau d'affichage des propriétés ne sont pas pris en charge par IE7 et au - dessous de

    si vous ne voulez pas/que l'extra élément HTML, vous pouvez simplement donner IE7 et ci-dessous quelques-top padding sur le .quote - de sorte que, bien qu'il ne serait pas centrée verticalement avec précision, il peut être acceptable de retomber

    CSS:

    #testimonial {
    background: #eee url('images/testimonial.png') no-repeat;
    width: 898px;
    height: 138px;
    margin: 10px auto 0;
    padding: 0 30px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.quote {
    font-size: 32px;
    font-family: "Times New Roman", Verdana, Arial, sans-serif;
    font-style: italic;
    color: #676767;
    text-shadow: 1px 1px #e7e7e7;
}

    IE CSS:

    <!--[if lte IE 7]>
<style type="text/css" media="screen">
#testimonial i {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.quote {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}
</style>
<![endif]-->

    HTML:

    <div id="testimonial">
    <i></i>
    <span class="quote">Some random text <br> that spans two lines</span>
</div>

    OriginalL'auteur clairesuzy

  3. 2

    Vous pouvez faire plus simple avec un seul span
    http://jsfiddle.net/7ebLd/

    #testimonial {
    height: 138px;
    line-height: 138px;
}
span {
    display: inline-block;
    line-height: 19px;
    vertical-align: middle;
}

    OriginalL'auteur polkila

  4. 1

    Ce site web offre une multitude de options pour le centrage vertical avec css.

    Si vous pouvez définir une taille sur .quote, je pense que la Méthode 2 serait de travailler dans cette situation:

    .quote {
     position:absolute;
     top:50%;
     height:240px;
     margin-top:-120px; /* negative half of the height */
}

    Une autre option est d'utiliser display:table-cell; vertical-align:middle; méthode dans le CSS, mais cette option ne fonctionne pas sous IE, donc vous devrez également définir un IE-version spécifique.

    OriginalL'auteur Paul Sham

  5. 0

    Ce site:

    http://www.emblematiq.com/blog/vertical_align_with_css/

    Avec le résultat de:

    http://www.emblematiq.com/blog/vertical_align_with_css/assets/03.html

    Utilise le balisage suivant/css pour centrer verticalement sur plusieurs lignes à l'aide de la display: table-cell, vertically-align: middle méthode:

    <div id="wrapper">
    <img src="0.gif" alt="stuff" id="fixed" />
    <div id="floating"><div><div>
<p>Middle aligned text goes right here and it does wrap nicely at the end of the line</p>
    </div></div></div>
</div>
    p {
    margin:0;
    padding:0;
}
#wrapper {
    width:550px;
    border:1px solid #666;
    padding:10px;
    height:300px;
}
#fixed {
    float:right;
    width:200px;
    height:300px;
    background:#666;
    display:block;
}
#wrapper>#floating { /*display:table for Mozilla & Opera*/
    display:table;
    position:static;
}
#floating { /*for IE*/
    width:300px;
    height:100%;
    background:#EAEAEA;
    position:relative;
}
#floating div { /*for IE*/
    position:absolute;
    top:50%;
}
#floating>div { /*for Mozilla and Opera*/
    display:table-cell;
    vertical-align:middle;
    position:static;
}
#floating div div {
    position:relative;
    top:-50%;
}

    Problème aligne verticalement du texte d'un élément qui s'étend sur deux lignes

    OriginalL'auteur Jared Farrish