Assurez - <h1> à la verticale du centre de avec le CSS?

<header id="logo">
    <img src="logo.png" />
    <h1>Some text here</h1>
</header>

- Je utiliser

h1{display: inline;}

à les faire dans la même ligne, mais le texte est plus faible que l'image,
les images est 48x48px et la taille du texte est 23px, je tiens à rendre le texte vetically centre de l'image, comment pourrais-je le faire avec du CSS? Juste besoin de l'appui de Chrome.

Merci pour vos réponses, a finalement obtenu ce travail: http://jsfiddle.net/tFdpW/

OriginalL'auteur wong2 | 2011-06-09

  1. 16

    Comme ça? http://jsfiddle.net/xs4x6/

    <header id="logo">
    <img src="http://dummyimage.com/48x48/f0f/fff" />
    <h1>Some text here</h1>
</header>

header img {
    vertical-align: top
}

h1 {
    display: inline;
    font-size: 23px;
    line-height: 48px
}
    Pourriez-vous nous expliquer quelles sont les règles de rendu/layout mandat de votre solution? Aussi, il semble que la solution sans le coder en dur la taille de l'image dans le css devrait être possible et clairement mieux vous en connaissez une?
    D'une manière légèrement différente qui fait plus de sens: jsfiddle.net/thirtydot/xs4x6/363

    OriginalL'auteur thirtydot

  2. 3

    Essayez d'ajouter vertical-align:middle; à l'image.

    Exemple: http://jsfiddle.net/Uxs7w/

    Il fonctionne, mais comment faire mieux? jsfiddle.net/DPJ3X
    Vous pouvez jouer avec les CSS, par exemple, ajouter margin:0 8px 8px 0; à l'img.

    OriginalL'auteur Floern

  3. 3
    h1{display: inline;line-height:48px;}

    OriginalL'auteur jimplode

  4. 2

    @wong2; tout d'abord. inline propriété ne prend pas en charge la marge verticale, rembourrage des propriétés .Donc, il y a d'autres options.

    première: supprimer display:inline & donner float.

    img, h1{float:left;}
h1{margintop:15px; margin-left:10px;}

    deuxième: donner display:table.

    #logo{display:table}
img, h1{display:table-cell}
h1{vertical-align:middle;}

    troisième: si vous ne voulez pas supprimer display:inline.

    h1{display: inline;line-height:48px;}

    OriginalL'auteur sandeep

  5. 1

    si le "logo" de l'en-tête a obtenu le droit de hauteur, il suffit d'utiliser le css vertical-align:middle propriété

    http://www.w3schools.com/css/pr_pos_vertical-align.asp

    J'ai mis de l'en-tête hauteur de 50px, puis définissez h1 vertical-align de moyen, pas de travail..
    vous devez l'affecter à l'image

    OriginalL'auteur VAShhh

  6. 0

    Essayez d'utiliser

    h1 {
display: table-cell;
vertical-align: middle;
}

    OriginalL'auteur dimanus