[Résolu] Centrer un element et l'autre suit sans le décentrer

Bonjour,

J'ai un problème qui parait simple à résoudre mais aucune idée ne me vient.
J'en appel à votre aide.

Dans le cas où nous avons dans une <div> qui contient deux <span>.
Est-il possible, avec le css, de pouvoir centrer le 1er <span>, et l'autre se greffe à droite de ce dernier sans le décentrer ?

Je sais pas si ça vous parait clair.

Je vous remercie d'avance,
bien cordialement,

salut,
à priori simple. Il suffit de mettre le deuxième <span> en position absolue. Une peu comme ça.

Bonjour,

une variante au code de Zelalsan pour montrer les contraintes : http://jsfiddle.net/vquZ8/1/

<div>
  <span>Lorem ipsum dolor sit amet</span>
  <span>absolute<br>en<br>dehors<br>du<br>flux<br>ça peut<br>être<br>embêtant</span>
</div>

div {
    position: relative;
    width: 80%;
    height: 100px;
    margin: auto;
    border: 1px solid;
    text-align: center;
}
span {
    display: inline-block;
    height: 100%;
    background: red;
    padding: 0 10px;
}
span+span {
    position: absolute;
    height: auto; /* sinon c'est 100% via la règle précédente */
    background: lightblue;
}

Modifié par Felipe (30 Aug 2013 - 21:31)

C'est parfait !
Merci Zelalsan et Felipe

Je t'en prie.

@Felipe> oui logique vu le "height:100%" est donné à tous les <span>. M'enfin c'est toujours bon d'anticiper