Centrer un div entre deux images

Bonjour
J'ai une bannière avec deux images (une à droite et une à gauche)

<div id="banner">
   <a href="#"><h1 id="logo-1">logo1</h1></a>
  <div id="title"><h1>Title</h1></div>
  <a href="#"><h1 id="logo-2">logo2</h1></a>
</div>

Je voudrai arriver à centrer la div title entre les deux div logo.

#logo-1{
float:left;
width:150px;
}
#logo-2{
float:right;
width:150px;
}

Si je mets pour la div title float: left, les trois div sont bien alignés.. mais title n'est pas centrée.
Si j'enleve le float à title et que je lui mette margin-left et tmargin-right à 170px, elle est bien centrée ..mais le logo-2 reste en-dessous et ne vient pas se mettre à droite de title.
Modifié par cpalo (09 Apr 2014 - 09:30)

Bonjour,

Effectivement, c'est ainsi que le positionnement flottant fonctionne.

Pour commencer, tu as une erreur dans le code, tu cibles deux fois "#logo-1".

La solution simple pour t'en sortir est de modifier le HTML et de placer #logo-2 juste après #logo-1.

Sinon, d'autres solutions fonctionnent sans flottants, par exemple en modèle d'affichage tabulaire.

Bonne chance.

Pour commencer, tu as une erreur dans le code, tu cibles deux fois "#logo-1".

c'était une erreur de copier-coller lorsque j'ai rédigé le post ( je viens de corriger).
En modifiant le htlm comme tu me le disais de faire, impeccable ça a fonctionné.

Merci

petite question:
la manière dont j'écris le code htlm pour le lien et le logo est-ce la plus correcte?
ou il faudrait plutôt : <div id="logo-1"><a href="#"><h1>logo</h1></a></div>

Cordialement

salut,
et tu pourrais ajouter :

#title {overflow:hidden;text-align:center;}

Par contre, à mon sens, ce n'est pas propre du tout. Il y a tellement d'autres meilleures façons de faire que passer par un "float" ressemble presque à du bricolage.
Pour la pertinence du code, j'ai aussi des doutes. Pourquoi mettre un <h1> dans une <div> ? Et puis trois <h1> à la suite d'emblée !