Comment avoir du texte centré et du texte flottant à droite sur la même ligne, alors que tout a des largeurs dynamiques ?

Question

J'ai un bloc de texte de taille variable, que je voudrais centrer dans un div. La largeur du div est un % de son élément parent, et la hauteur est définie par le padding, quelle que soit la hauteur du texte centré. Ceci est facilement réalisable via :

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

Cela fonctionne bien.

Mais quand j'essaie d'ajouter la partie sur la droite :

<div style="width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
    <div style="float: right;">ASDF!</div>
</div>

alors il compte la largeur du texte de droite vers la largeur totale du texte, et met le "ASDF !" à droite, mais met le "Lorem ipsum..." plus à gauche qu'il ne devrait l'être (comme si la longueur totale de lorem... incluait le asdf !).

Voici une maquette de ce que j'essaie d'obtenir :

Je pense que ce serait assez facile avec flexbox, mais je veux éviter d'utiliser quoi que ce soit de récent car je dois prendre en charge les anciens navigateurs.

Cette question semble pertinente, mais (corrigez-moi si je me trompe) elle semble nécessiter des largeurs connues.

Comment dois-je m'y prendre ?

Answer 1

En fait, ce n'est pas aussi compliqué qu'il n'y paraît. Il suffit de retirer le div aligné à droite du flux normal et de le positionner (aligner) à droite du conteneur de texte. (Toutes les lignes de CSS commentées dans la démo sont nécessaires ; le reste est à des fins démonstratives).

L'avantage de cette solution est que le conteneur et les éléments de texte s'enchaînent normalement, et qu'elle utilise la même structure HTML que votre exemple.

Démonstration :

Voir la démo >> http://pasteboard.s3.amazonaws.com/images/1U5yFIwE.png

Code de base :

#text {
  margin: auto; /* aligns #text to the center of #container */
  text-align: center; /* self-explanatory; aligns text to the center */
  position: relative; /* needed so that the position of #right is relative to #text, not the body */
}

#right {
  display: inline-block; /* allows #right to display on the same line as the text in #text while still acting like a block element (block: p, div, etc.) */
  position: absolute; /* removes #right from the normal flow, and positions it in the top-left of #row */
  right: 0; /* aligns #right 0px away from the right side of #text */
}

Image :

Answer 2

Comme d'autres l'ont dit, vous devez libérer la deuxième division du flux, puis la repositionner. Définissez le haut absolu de la même manière que votre remplissage pour rétablir la position verticale correcte. Essayez ceci (pas la même chose que Karacas), voyez la deuxième vue pour montrer que le centrage est correct :

<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;position: relative;">
    Lorem ipsum...
    <div style="position: absolute;right: 0;top: 15px;">ASDF!</div>
</div>
<div style="border:1px solid red;width: 50%; padding: 15px; text-align: center;">
    Lorem ipsum...
</div>

http://jsfiddle.net/huuanito/8N9BT/

Answer 3

Le code que vous avez tel qu'il est fonctionnera à peu près avec seulement quelques petits changements.

1. Le deuxième div doit être indépendante et ne doit pas être imbriquée dans la première.
2. La première `div' doit float à la gauche et la seconde vers droite .

C'est à peu près tout.

    <div style="width:50%; padding:15px; text-align:center; float:left;">
     Lorem ipsum...
 </div>

 <div style="float:right;">
     ASDF!
 </div>

Essayez-le !

Answer 4

J'ai fait des travaux avec un peu de css..,

Exemples de code pour HTML :

<div class="MainContainer"><p>Lorem ipsum...</p><div style="float: right;">ASDF!</div></div>

Exemples de code pour CSS :

.MainContainer{
    width : 50%;
    padding : 15px !important;   
    text-align : center !important;
    border : 15px solid #000;
    position : absolute;   
}

.MainContainer div { margin-top : -7%; text-align:center !important;}

Pour le voir en action :

http://jsfiddle.net/john_rock/tZzwA/

Je pense que cela peut vous aider à résoudre votre problème.