web-dev-qa-db-ja.com

折り返した場合でも、左揃えのテキストを中央に配置するにはどうすればよいですか？

Div内で左揃えのテキストブロックを中央に配置する必要がありますが、ブロック自体ではなく、テキストブロックの視覚的な幅を中央に配置する必要があります。

多くの場合、これは同じことかもしれませんが、divがかなり狭く（モバイル幅を考える）、テキストが長すぎて1行に収まらないため、オーバーフローする必要がある場合を考えてください。

以下の例では、説明のためにテキストブロックを水色で示していますが、実際には親div（白）と同じ色になります。使用されるテキストには改行もありません。

enter image description here

1aでは、テキストは1行のみで、テキストブロックの最大幅よりも小さいため、テキストブロックをテキストの幅に設定して、問題ありません。

ただし、2aでは、テキストは最大幅よりも長いため、次の行に折り返されます。これにより、表示されるテキストブロックが中央に表示されなくなります。

これらの状況の両方を1bおよび2bとしてHTMLとCSSのみを使用して表示するにはどうすればよいですか？ ？

編集1：誰もが1aと2aの状況を達成する方法を教えているようですが、私はすでにそれを持っています。 1bと2bの状況を達成したい。

編集2：私が使用しているコードは、基本的にデビッドが彼のリンクで与えたものと同じです（ http://jsfiddle.net/davidThomas/28aef/ ）。ただし、テキスト領域に色を使用することは、この点を説明するためのものです。これを白に変更すると（ http://jsfiddle.net/28aef/2/ ）、テキストブロックが中央に表示されなくなったことがわかります（つまり、左右のマージンが等しくありません）

htmlcssalignmenttext-alignment
30
JohnGB

私はこれが古いことを知っていますが、私はちょうど同じ問題を抱えていて、これらのどれもそれを解決しないことに同意します。これは100％クロスブラウザではないかもしれませんが（テストは行っていません）、動作します！

さて、あなたは自分自身で改行を入れなければならないという制限がありますが、それはこの種の状況に関係なくなされる必要があることのようです。

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をお勧めします：

  .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

私はこれが長い間元のポスターの問題にならなかったと思うが、私は同じ質問を持っていて、答えを見つけるためにグーグルでした。以下は、私が見つけた結果です。

免責事項：私はこれの専門家ではなく、他の人はこの状況をよりエレガントに処理できるかもしれませんが、私のアプリケーションでは機能し、他のアプリケーションでも機能する可能性があるので、投稿したいと思いました。

<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>

上記では、最初のdivは不要な場合があり、余白はほとんど変更せずに2番目のdivに移動できることに注意してください。必要に応じて、パーセンテージを調整するか、ピクセル幅を指定すると、すべて設定できます。これにより、ある時点で誰かが時間を節約でき、新しい問題が発生しないことを願っています。幸運を祈ります。

0
Lokipiece

私はこれが古いことを知っていますが、答えられていません。 calc（） vhおよびvw（viewport units）、少なくとも、およびいくつかの数学を使用して実行できます。トリックは、左と上を手動で中心に設定することです。ビューポートユニットを使用したのは、精度と常に変化する効果のためです。

    .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>

ウィンドウのサイズ変更時に、DIVを含むテキストを中央に配置してサイズを変更するソリューションを探していました。私はこの投稿に出くわし、通常のCENTERメソッドの使用に問題があることに気付いた後、回避策を見つけました。役に立てば幸いです。

0
JSG