32

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

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

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

ここに画像の説明を入力

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

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

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

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

編集 2: 私が使用しているコードは、David がリンク ( http://jsfiddle.net/davidThomas/28aef/ ) で提供したものと本質的に同じです。ただし、テキスト領域の色の使用は、この点を説明するためのものです。これを白 ( http://jsfiddle.net/28aef/2/ ) に変更すると、テキスト ブロックが中央に配置されていないように見える (つまり、左右の余白が等しくない) ことがわかります。

4

5 に答える 5

11

これが古いことは知っていますが、同じ問題が発生したばかりであり、これらのどれも解決しないことに同意します。これは 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;
}
于 2013-02-20T21:54:23.813 に答える
-3 
<div style="text-align:center;">
    <div style="display:inline; text-align:left; margin:20px;"> <!-- or whatever width you want that block to be at -->
          Content here
     </div>
</div>

基本的に、最初の div は包含要素です。テキストを中央揃えにする必要があります。

次に、ブロック div (青い領域) で、インラインを表示し、テキストを左揃えにして、マージン (テキストが折り返されたときに周囲に残したい空白) を設定する必要があります。

于 2012-01-02T16:02:35.730 に答える