Le centre text-align étant affecté par les éléments flottants

J'ai deux float éléments, à droite et à gauche.

L'élément parent pour chacun d'entre eux est text-align: center margin: auto.

Veuillez voir ici:

http://jsfiddle.net/KRWNs/

Si vous voyez le 1. texte, il y a le centre. Le 2. le texte est en mouvement ( le fait d'être touchée à partir du flotteur éléments) à la gauche, comme vous pouvez le voir, et ne sont pas centre de.

Comment puis-je faire de cette aligner que la normale au-dessus (comme le 1. texte), sans être affecté par le flotteur éléments sur le côté droit et gauche?

grâce à l'avant

source d'informationauteur Karem | 2010-12-19

  1. 14

    Vous aurez besoin d'utiliser autre chose que le flotteur à coller les éléments sur les côtés. Comme il est, ils se comportent comme ils sont supposés. Voici un mise à jour exemple à l'aide de positionnement absolu à coller sur les côtés. Un contenu très long n'honorera pas les éléments, cependant.

    Sinon, comme on le voit dans ce testvous devez vous assurer que les deux flotteurs sont de la même largeur.

    Le fait que l'élément extérieur est "margin auto" n'est pas pertinent.

  2. 1

    Si vous ne pouvez pas jouer avec les positions absolues, comme dans mon cas puisque je suis en train de travailler sur une page à imprimer et absolue apporte tout le contenu de la page, vous pouvez jouer avec les marges.
    Simplement écrire ce que vous voulez dans les différentes lignes, et ensuite pour le contenu que vous souhaitez aligner à droite/à gauche ajouter un négatif de la marge du haut (ou le bas si vous l'avez écrit en haut).

    À l'aide de Phrogz exemple:

    <div class="test">
      <div id="s0">
      1. text<br />
      2. text
   </div>
   <div id='s1'>999</div>
   <div id='s2'>Follow me</div>
</div

    avec css:

    .test{
    width: 500px;
    text-align: center;
    background: yellow;
    line-height: 18px;
}

#s1 { text-align: right; margin-top: -18px; }
#s2 { text-align: left;  margin-top: -18px; }

    Vous pouvez voir un exemple de travail ici