[Résolu] Centrer texte verticalement par rapport à 2 images

bonjour à tous,

J'ai suivi avec une grande attention les différents tutos de ce site : super. Car je suis novice dans la création de site web (c'est mon premier et ça fait bobo à la tête .... de longues heures de recherche sur internet).

mon en-tête (bandeau supérieur) est composé de 2 logos (un à droite et un à gauche) qui encadre un texte. Je voudrais aligné le texte horizontalement (la seule méthode que j'ai trouvé est l'utilisation d'un tableau) est-ce possible en CSS ?


Conscient de mes exigences, je tiens à remercier par avance toutes les bonnes âmes qui m'aideront.
Modifié par tay3112 (13 May 2007 - 22:32)

Bonsoir,

Pour le point 2, l'alignement du texte horizontalement entre deux images, je verrai bien un UL avec 3 LI. Quelque chose comme ça :

<ul>
  <li><img src='Images/logo-ffessm.png' width="xx" height="xx" alt="texte de substitution" /></li>
 <li>bla bla bla mon texte ici</li>
 <li><img src='Images/logo-ffessm.png' width="xx" height="xx" alt="texte de substitution" /></li>
</ul>

Avec un peu de css comme ceci :

#en_tete ul { 
margin:0;
padding:0;
text-align:center; /* pour centrer les li dans ul */
}
#en_tete li {
list-style-type:none; /* on vire les puces des items */
margin:xx xx xx xx; /* on définit les marges externes pour positionner le bloc */
padding:0;
text-align:center; /* pour centrer le texte */
}

Et dans le li tu définis les marges externes pour régler l'espacement entre tes images latérales et le texte au milieu (margin:haut droite bas gauche). Avec quelques réglages fins ça devrait satisfaire à ta demande.
Modifié par Philos (12 May 2007 - 01:07)

Merci pour le conseil, mais est-ce bien sémantique d'utiliser une liste pour 3 éléments : 2 logos et un titre ??
Modifié par tay3112 (12 May 2007 - 22:31)

J'ai essayé et ça ne fait pas tout à fait ce que je souhaite .....


cela centre tout verticalement :

|logo|

titre

|logo|

Mais merci d'avoir pris le temps de répondre

PS : j'ai "nettoyer" un peu mes posts un peu confus.
Modifié par tay3112 (12 May 2007 - 22:40)

Je vais essayer d'être un peu plus clair.

Dans mon bandeau supérieur (qui occupe toute la largeur de la page), j'ai

|1 logo| le titre |1 logo|

(les | | symbolisent une image)

La disposition ne pose pas trop de problême avec des balises in-line.

Le hic c'est d'aligner horizontalement le texte au milieu des logos (méthode line-height inefficace)

L'utilisation d'un tableau résoud le pb mais cela m'embête d'en mettre un, je préfèrerait une méthode CSS.

J'espère avoir était plus clair.
Modifié par tay3112 (12 May 2007 - 22:38)

Salut,

Pourquoi pas un bloc head postion relative, image gauche absolute left 0, image droite absolute right: 0 et le texte h1 text-align: center .

Salut,

tay3112 a écrit :

Le hic c'est d'aligner horizontalement le texte au milieu des logos (méthode line-height inefficace)

j'ai un doute là, tu parles de line-height, c'est du centrage vertical ou bien horizontal que tu n'arrive pas à obtenir ?

tay3112 a écrit :
J'ai essayé et ça ne fait pas tout à fait ce que je souhaite .....


cela centre tout verticalement :

Oui, c'est normal, j'ai oublié une déclaration dans le li -> display:inline

Là, ton texte sera par défaut aligné en bas entre les deux images. Si tu veux le décoller du bas, un coup de padding-bottom et hop (en posant un id sur le li du texte par exemple, pour pas que le padding s'applique aux trois li..
Et pour éloigner les images du texte en latéral, tu joues sur les margin latéraux, toujours sur le li du texte (celui recevant un id).
Modifié par Philos (13 May 2007 - 11:31)

Salut,

la solution de ghost devrait fonctionner, mais tu peux aussi utiliser des flottants pour positionner tes images :

<div id="entete">
   <img src="image1.png" alt="..." id="image1" width="XXX" height="..." />
   <img src="image2.png" alt="..." id="image2" width="YYY" height="..." />
   <h1>Titre à centrer</h1>
</div>

#entete {
   overflow: hidden; /* Crée un contexte de formatage pour englober les flottants dans le calcul de la hauteur */
   }
#image1 {
   float: left;
}
#image2 {
   float: right;
}
h1 {
   text-align: center;
   margin-left: XXXpx;
   margin-right: YYYpx;
}

Christian Le Bouler a écrit :
Salut,

j'ai un doute là, tu parles de line-height, c'est du centrage vertical ou bien horizontal que tu n'arrive pas à obtenir ?

Je veux que mon titre soit aligner au milieu en hauteur par rapport aux images.

Alors vertical ou horizontale ?? Pour moi c'est horizontal mais j'en suis pas sûr !!

De toute manière, je veux aussi centrer le tout par rapport à ma page.

Alignement vertical donc

Je veux pas être lourd mais avec un text-align:center sur le UL en plus du LI contenant le texte, tu positionnes tout en centré. Le contenu de la liste et le contenu du LI avec son texte.

Mais bon, apparement ma suggestion ne doit pas être si judicieuse et simple que je le pense vu que personne n'abonde dans ce sens (et pourtant...).

Re,

Pour rester dans mon idée, sans utiliser vertical-align, ni les floats (tant qu'à être hors du flux vaut mieux éviter les sorties de float ... )

<style type="text/css">
#conteneur{
width: 500px;
border: 1px solid black;
position: relative;
margin: auto;
}
h1{
height: 157px;
font-size: 20px;
line-height: 137px;
padding: 0;
margin: 0;
text-align: center;
}

.droite{
position: absolute;
right: 0;
top: 0;
}

.gauche{
position: absolute;
left: 0;
top: 0;
}

</style>
	
</head><body>
<div id="conteneur">
	<img src="image.jpg" class="droite" />
	<img src="image.jpg" class="gauche" />
<!-- image fait 157px de haut -->
	<h1> texte </h1>
</div>

</body>

tay3112 a écrit :


Je veux que mon titre soit aligner au milieu en hauteur par rapport aux images.

Alors vertical ou horizontale ?? Pour moi c'est horizontal mais j'en suis pas sûr !!

C'est du centrage vertical et la solution est évidente : utilise la balise <table> et basta. Quand les css seront capables de faire ça sans se prendre la tête... ...pour rien (aucun résultat probant) on sera de toute façon au courant.

Il faut que tu apprennes à formuler tes questions parce que là aucun des post précédents ne répondait à ta préoccupation, tout le monde a répondu sur du centrage horizontal.

PS :

Ah oui, évidemment l'autre solution évidente c'est d'arrèter de se prendre la tête avec ces fichues histoires de centrage vertical.
Modifié par Christian Le Bouler (13 May 2007 - 22:20)

OK, j'ai modifier le titre du post.

Donc ... je reviens à la première chose que j'ai réussi à faire et qui marche : un tableau

Si d'autre on des idées n'hésitez pas .

Je reconfirme, je voulais parler de centrage verticale


Et merci à tous.
Modifié par tay3112 (13 May 2007 - 22:32)

??

<h1><img>texte<img></h1>

css:
h1 img {vertical-align:middle;}

Je vois pas ou il y a prise de tête ou tableau obligatoire, l'alignement vertical est des plus "naturel" dans ce cas en restant dans le flux. Au lieu de laisser les images se positionné sur le "baseline" par defaut (alignement vertical) , il suffit de donnée une valeur differente que celle appliquée defaut ... le vertical-align:middle; par exemple.
exemple visuel por ceux qui n'ont pas encore "bookmarké" cette page.: http://www.ibloomstudios.com/article6sample1.php

Si les image sont dans la balise h1 et sans significations particulieres , alors un alt="" suffit .

pour ce prendre la tête et comprendre un peu mieux les vertical-align , applicables aux elements inline et a l'interieur des cellules de tableaux (inclus le display:table et CIE):
1 exemple sans tableaux (qui passe dans IE aussi): http://gcyrillus.free.fr/essai/v-align-midlle-block-tous.html
et un blabla a ce propos : http://gcyrillus.free.fr/decoupe-fr/pluxml/plumskinswitch/?7-vertical-align

Si le vertical-align devient aussi chaud que tableau/div , on n'a pas fini de se compliquer la vie avec de la simple mise en forme ...

gc
Modifié par gcyrillus (14 May 2007 - 15:05)

Merci beaucoup gcyrillus,

tu as débloqué la situation et j'au enfin pu retirer ce tableau par une mise en forme CSS.

En effet, j'ai essayé d'aligner le texte sur las images mais c'est l'inverse qu'il faut faire : centrer les images par rapport à l'espace disponible.

AU vue des différentes intervention, je pense que ta solution, aussi simple soit-elle, permet de mettre les choses au clair et pourra servir aux autres (surtout pour un débutant comme moi [ )

PS : superbes liens pour l'explication des phénomènes.