web-dev-qa-db-fra.com

Comment puis-je centrer le texte aligné à gauche même lorsqu'il est entouré?

Je dois centrer un bloc de texte aligné à gauche dans une div, mais j'ai besoin que la largeur visuelle du bloc de texte soit centrée et non pas le bloc lui-même.

Dans de nombreux cas, cela peut être la même chose, mais imaginons un cas où la div est assez étroite (pensez aux largeurs mobiles) et que le texte est trop long pour tenir sur une ligne, il doit donc déborder.

Dans les exemples ci-dessous, le bloc de texte est représenté en bleu clair, mais dans la pratique, il aura la même couleur que le parent div (blanc). Il n'y a pas non plus de sauts de ligne dans les textes utilisés.

enter image description here

Dans le 1a, le texte ne représente qu'une ligne et sa largeur est inférieure à la largeur maximale du bloc de texte. Je peux donc définir le bloc de texte sur la largeur du texte et aucun problème.

Cependant, dans 2a, le texte est plus long que la largeur maximale et passe donc à la ligne suivante. Ceci a pour effet que le bloc de texte visible ne semble plus centré.

Comment puis-je afficher ces deux situations comme 1b et 2b uniquement en utilisant HTML et CSS?

Edit 1: Il semblerait que tout le monde me dise comment résoudre la situation en 1a et 2a, mais je l’ai déjà. Je veux atteindre la situation en 1b et 2b. 

Edit 2: Le code que j'utilise est essentiellement le même que celui que David a donné dans son lien ( http://jsfiddle.net/davidThomas/28aef/ ). L'utilisation d'une couleur pour la zone de texte est juste pour illustrer ce point. Si vous le changez en blanc ( http://jsfiddle.net/28aef/2/ ), vous pouvez voir à quel point le bloc de texte n’a plus l’air centré (c’est-à-dire que les marges gauche et droite ne sont pas égales)

htmlcssalignmenttext-alignment
30
JohnGB

Je sais que c'est vieux, mais je viens d'avoir le même problème, et je suis d'accord pour dire qu'aucun d'entre eux ne le résout. Celui-ci n'est peut-être pas 100% cross-browser (n'a pas encore été testé) mais ça marche!

Maintenant, la restriction est que vous devez définir vous-même la ligne de démarcation, mais il semble que ce soit ce qui doit être fait indépendamment de ce type de situation.

http://jsfiddle.net/28aef/2/

div.textContainer {
    text-align: center;
    border: 1px solid #000;
    height: 100px;
    padding: 10px 0;
}

div.textContainer p {
    display: inline-block;
    text-align: left;
}
12
John

Flexbox peut être bon aller:

  .d-flex {
      display: -ms-flexbox!important;
      display: flex!important;
  }
  .flex-column {
      -ms-flex-direction: column!important;
      flex-direction: column!important;
  }
  .ml-auto, .mx-auto {
      margin-left: auto!important;
  }
  mr-auto, .mx-auto {
      margin-right: auto!important;
  }
  .w-50 {
      width: 50%!important;
  }
<div class="d-flex flex-column mx-auto w-50">
  <p>Left aligned text</p>
  <p><em>Aenean sed lectus massa, quis fringilla magna. Morbiporta sapien quis ligula viverra condimentum non vel nunc. Ut ac pulvinar nibh. Sed vitae eros et purus ullamcorper fermentum eu a libero. Curabitur vitae dolor ligula, varius tincidunt arcu. Quisque lectus magna, semper sed tincidunt nec, mattis vel justo.</em></p>
  <p>Using <a href="https://getbootstrap.com/docs/4.1/utilities/flex/">Bootstrap 4</a> classes.</p>
</div>

1
kwaaui

Je suppose que cela est depuis longtemps devenu un non-problème pour l'affiche originale, mais j'avais la même question et cherchais une réponse sur Google. Ci-dessous le résultat de ce que j'ai trouvé.

Avertissement: je ne suis pas un expert dans ce domaine et d’autres auront peut-être un moyen plus élégant de gérer cette situation, mais cela a fonctionné pour mon application et peut fonctionner pour d’autres applications.

<div style = "text-align: center; margin-left: 10%; margin-right: 10%">
    <div style = "display: inline-block; text-align: left;">
        Desired text goes here.
    </div>
</div>

Notez que dans ce qui précède, la première division peut ne pas être nécessaire et que les marges peuvent être déplacées vers la seconde division avec peu de changement. Personnalisez, au besoin, les pourcentages ou spécifiez une largeur en pixels et vous devriez être prêt. J'espère que cela fera gagner un peu de temps à quelqu'un et ne créera pas de nouveaux problèmes. Bonne chance à tous.

0
Lokipiece

Je sais que c'est vieux mais il n'a pas été répondu. Cela peut être fait avec calc () vh et vw (unités de la fenêtre), au moins, et quelques calculs . Le truc semble être de régler manuellement la gauche et le haut au centre. J'ai utilisé les unités de la fenêtre d'affichage pour leur précision et leur effet en constante évolution.

    .clr	{ clear:both; }
    .bg666	{ background:#666;}  
    .bgf4	{ background: #f4f4f4; }
    .hv60	{ height: 60vh; }
    .hv50	{ height: 50vh; }
    .wv60	{ width: 60vw; }
    .wv50	{ width: 50vw; }
    .tlset	{ position:relative; left: 30px; top: 30px; }
    .true_cntr_inner { position:relative; left: calc(60vw - 50vw - 5vw);  top: calc(60vh - 50vh - 5vh); } /* left = (60% - 50% of inner block / 2);*/
    <div class = 'clr wv60 hv60 bg666 tlset'>
        <div class = 'clr wv50 hv50 true_cntr_inner bgf4'>
            this is some text that spans acrossed 50% of the viewport. 
            I state the obvious because I believe people can see the obvious and I 
            was wrong a lot. Now it has become somewhat of a habit like bad spelling 
            so forgive me. 
        </div>
    </div>

Je cherchais une solution pour centrer et redimensionner mon texte contenant DIV sur le redimensionnement de fenêtre. J'ai parcouru ce post et trouvé ma solution de contournement après avoir réalisé qu'il y avait un problème en utilisant la méthode CENTER normale. J'espère que ça aide.

0
JSG