CSS Aligner Verticalement le Texte dans l'en-Tête

Je suis en train d'aligner le texte verticalement dans ma tête, et je rencontre quelques difficultés. Ci-joint une image de mon point de départ:

CSS Aligner Verticalement le Texte dans l'en-Tête

L'en-tête a une hauteur de 141px et tout ce que l'en-tête doit être droite dans le milieu. Même les "Nom du Site", de sorte que si les changements de nom et ne prend que 1 ligne, ou peut-être 3 lignes ça va être dans le même lieu.

Remarque: c'est pour plusieurs sites web, qui sont générées dynamiquement, donc c'est pourquoi je ne peux pas juste position avec un margin-top parce que les noms sont différents, certains peuvent prendre jusqu'à quelques lignes et certains pourraient prendre plusieurs lignes.

J'ai pris mes tentatives pour aligner verticalement à partir de ce que j'ai cherché en ligne, parce que rien ne fonctionne donc c'est le code de mon point de départ.

HTML:

<div id="header">
    <h1>Name of Website Here</h1>
    <h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3>
    <p>123 Main St.<br />City, State, Zip</p>
</div>

CSS:

#header{height:141px;}
#header h1{float:left;font-size:1.7em;width:200px;text-align:center;line-height:26px}
#header h3{float:left;text-align:center;color:#e62520;font-size:1.7em;line-height:26px;font-style:italic;margin:0 0 0 95px}
#header h3 span{font-size:1.2em;}
#header p{float:right;color:#2a5091;font-size:1.3em;font-style:italic;font-weight:bold;line-height:20px;text-align:right;}

Merci!

  • publier vos css et html
  • Allaient avoir à voir quelques-HTML/CSS pour obtenir la meilleure réponse, sans voir le code, je dirais que la largeur est faux.
  • Quels sont les navigateurs de vous essayer à l'appui? Parce que vous pourriez probablement utiliser display:inline-block ou display:table-cell pour le faire fonctionner, mais vous auriez probablement certains IE6/7 questions.
  • Mise à jour avec mon code de départ!
  • avez-vous besoin d'IE6 ou 7?
  • - Je faire pour IE 7, je ne se soucient pas de IE 6.
  • Ce n'est pas le réel de la conception, il est juste que le cadre de base des styles CSS pour l'instant. Merci pour votre préoccupation.
  • Je pense que ma réponse ci-dessous devrait résoudre votre problème..

InformationsquelleAutor Drew | 2011-08-16
  1. 2

    Je pense que c'est ce que vous cherchez, consultez démo de violon.

    Le balisage devient comme:

    <div id="header">
    <span><h1>Name of Website Here</h1></span>
    <span><h3>Call Today!<br /><span>(xxx) xxx-xxxx</span></h3></span>
    <div><span><p>123 Main St.<br />City, State, Zip</p></span></div>
</div>

    Peut-être que vous pouvez bricoler un peu plus à éliminer une ou deux balises.

    Testé sur Win7 dans IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, google Chrome 12.0. Je sais il est également possible de travailler dans IE7, mais il a besoin de quelques réglages. T. b.c.

    • Merci beaucoup! Fonctionne parfaitement.
    • Dois juste travailler sur IE 7, il est vraiment bousille toute la mise en page.
    • cela ne fonctionne pas si vous avez plus ou moins de deux lignes de texte.
    InformationsquelleAutor NGLN
  2. 0

    Heres une bonne méthode. Créer une div à l'intérieur de l'en-tête de div et de lui donner le style suivant :

    .innerdiv {height:1px; position:absolute; margin-top:50% }

    Et assurez-vous que l'en-tête div a 

    position:relative;

    Et de mettre tout votre contenu à l'intérieur de innerdiv

    • Merci, je ne pouvais pas tout à fait obtenir que cela fonctionne, mais je vous remercie d'essayer.
    InformationsquelleAutor Jonah Katz