[Résolu] Centrer une image avec lien au mileu de deux autres

Bonjour,

Alors voici mon problème, je voudrais placer 3 images alignées dans mon header:
La première doit se trouver à gauche,
la deuxième au milieu et centrée et collée en haut de l'header.
et enfin la dernière sur la droite.
Et je voudrais aussi éviter le bricolage... Bon pour un premier sujet, j'avoue être assez embêtant .

J'ai essayé pas mal de choses avec les "inline", les balises "<center>", ou le "text-align", mais rien y fait...
Impossible pour moi d'aligner les images horizontalement tout en gardant l'image du milieu centrée (et collée en haut de l'header).

Voici mon code nettoyé:

<div class="header">
	<a href="../index.php"><img src="../images/XXX_Logo1.jpg" alt="Logo XXX" name="logo1" width="214" class="header" id="img_Logo1"/></a>
  	<a href="../index.php"><img src="../images/XXX_header.jpg" alt="Header XXX" name="logoHeader" width="691" class="header" id="img_header"/></a>
        <a href="../index.php"><img src="../images/XXX_Logo2.jpg" alt="Logo XXX" name="logo2" width="214" class="header" id="img_Logo2"/></a>
<!-- fin .header --></div>

.header {
	background-color: #000000;
	top: 100%;
	margin-top: 0%;
	bottom: 100px;
	-webkit-border-top-left-radius: 15px;
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

Merci pour ce site qui m'a déjà bien aidé, en espérant que vous puissiez le refaire pour ce sujet.

Benjahinfo.

Salut,

ça devrait le faire en mettant un text-align:center sur ton header et en fixant la largeur de tes liens à 33%.
Modifié par speedkills (08 Jun 2013 - 09:35)

Bonjour et (re-?)bienvenue,

tu peux utiliser display: table et table-cell (avec des div hein, pas un vrai tableau HTML...) pour profiter de la propriété suivante : les blocs affichés comme table-cell resteront à coup sûr sur une même ligne car ils sont dans un table-row (le parent est en display: table; et il n'y a pas d'éléments en table-row dans mon exemple mais les navigateurs se débrouillent sans dans l'immense majorité des cas).
Ensuite un width: 100% sur le parent en display: table; pour qu'il occupe toute la largeur.

Tu as 3 "cellules" mais le contenu dans chacune est aligné à gauche, comme n'importe quel texte par défaut. Avec text-align: center sur la seconde et text-align: right sur la troisième, cela donne l'illusion que les 3 cellules sont tout à gauche, au centre et tout à droite même si en réalité c'est dans leur "cellule" qu'elles sont positionnées.
Attention dans l'exemple j'ai utilisé KNACSS pour aller plus vite et parce que c'est bien fichu ; la classe .row confère aussi vertical-align: top (c'est ce que tu veux) et table-layout: fixed ce qui va forcer le navigateur à respecter les largeurs des cellules que tu indisquerais (ici 100% sur le parent, 3 cellules, aucune autre indication hop 33% chaque même si l'image au centre fait 80% de la largeur...).
Si tes 3 contenus sont très différents, il faudra préciser pour ton header .monHeader :

.row.monHeader {
    table-layout: auto;
}

pour que les cellules s'adaptent en largeur à leur contenu et pas l'inverse.

Démo : http://codepen.io/seraphzz/pen/tbDjf

EDIT:
- http://css.mammouthland.net/mise-en-page-avec-display-table.php
- http://www.alsacreations.com/tuto/lire/610-Mise-en-page-CSS-avancee-grace-a-la-propriete-display.html
- http://www.goetter.fr/conf/2011-parisweb/#intro
- http://fr.slideshare.net/goetter/vive-les-tableaux-de-mise-en-page
Modifié par Felipe (08 Jun 2013 - 11:03)

salut,

<div class="header">
	<a href="../index.php"><img src="../images/XXX_Logo1.jpg" alt="Logo XXX" name="logo1" width="214" class="header" id="img_Logo1"/></a>
        <a href="../index.php"><img src="../images/XXX_Logo2.jpg" alt="Logo XXX" name="logo2" width="214" class="header" id="img_Logo2"/></a>
  	<a href="../index.php"><img src="../images/XXX_header.jpg" alt="Header XXX" name="logoHeader" width="691" class="header" id="img_header"/></a>
<!-- fin .header --></div>

.header a {float: left;width: 214px;}
.header a+a {float: right;width: 214px;}
.header a+a+a {float: none;overflow: hidden;display: block;text-align: center;}

Par contre le lien occupera tout le milieu du header et sera cliquable même en dehors de l'image, donc tu pourrais englober ton lien du milieu dans un autre conteneur pour éviter ça

Bonjour, reste la méthode text-align:justify (biento display:flex).
http://codepen.io/gcyrillus/pen/iKCbH
extrait CSS:

.header {line-height:0;text-align:justify;background:yellow;}
.header:after {content:'';padding-right:2700px;margin-left:-100%;}/* la logique de la ligne qui ne se voit pas ! */
a , img {vertical-align:bottom;line-height:1.2em;}

2012 face a une incomprehension , j'avais tenter d'expliquer : http://yidille.free.fr/plux/valign/?69-text-align-justify-sur-derniere-ligne-et-centrage-de-boites
2013 Apparement chez les anglo-saxon, il y a plus de perméabilité aux techniques inhabituelles :
http://www.barrelny.com/blog/text-align-justify-and-rwd/
Modifié par gc-nomade (08 Jun 2013 - 13:28)

Merci de vos réponses, je vais étudier tout ça , je reviendrais vous dire de ce qu'il en est ^^
Modifié par benjahinfo (08 Jun 2013 - 20:37)