CSS：中央のブロックですが、コンテンツを左に揃えます

81

ブロック全体をその親の中央に配置したいのですが、ブロックの内容を左揃えにしたいのです。

例が最も役立ちます

このページ：

http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c% 2f％7c％7c％0d％0a ++％2f％2f +％7c％7c ++％7c％7c __％0d％0a＆type = python

アスキーアートは（表示されているとおりに）中央に配置する必要がありますが、整列して「YAML」のように見える必要があります。

またはこれ：

http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23 ％0d％0a％0d％0a％3f +％5b + New + York + Yankees％2c％0d％0a ++++ Atlanta + Braves +％5d％0d％0a％3a +％5b + 2001-07-02％2c + 2001-08-12％2c％0d％0a ++++ 2001-08-14 +％5d％0d％0a

エラーメッセージは、コンソールの場合と同じようにすべて表示されます。

css  alignment  center 
— ポール・タージャン
ソース

回答:

163

まず、div子コンテンツをtext-align: center。で中央揃えにする親を作成します。次に、を使用して子の幅に適応し、保持するコンテンツを必要に応じて左に揃える子divを作成します。display: inline-blocktext-align: left

<div style="text-align: center;">
    <div style="display: inline-block; text-align: left;">
        Centered<br />
        Content<br />
        That<br />
        Is<br />
        Left<br />
        Aligned
    </div>
</div>
スニペットを展開

— キーボン
ソース
5
明確で効果的。ありがとうございました！
— fuzzybear3965 2016年
11
1行のテキストが1行に収まらないとすぐにテキストが折り返され、ブロックは全幅になりますが、テキストは全幅に満たないため、ブロックが中央に配置されていても機能しません。テキストは含まれているブロックの全幅ではないため、問題ではありません。例については、stackoverflow.com
— questions / 8702802 /の
シンプルで美しい！ありがとう
— Cesar Bielich 2018年
3
@ user3338098それは機能します。あなたの場合、ブロックが望ましくないサイズに拡大するのを防ぐために、テキストの最大幅を設定する必要があります。私は文字通りこれとまったく同じロジックを自分の作業に適用し、図1b + 2bを実現することができました。
— マーク
20

他の質問からの実用的な答えを再投稿する：可変幅のフローティング要素を水平方向に中央に配置するにはどうすればよいですか？

フロートされて中央に配置される要素がid = "content"のdivであると仮定します...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

そして、次のCSSを適用します

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

これは、そのhttp://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloatsに関する優れたリファレンスです。

— ポール・タージャン
ソース
また、「ラップ」preと「コンテンツ」でもうまく機能しcodeます。
— Serge Stroobandt 2015年
This will be centered1行に収まらないとすぐにテキストが折り返され、ブロックは全幅になりますが、テキストは全幅よりも小さくなるため、機能しません。したがって、ブロックが中央に配置されていても、テキストは、含まれているブロックの全幅ではありません。例については、stackoverflow.com / questions / 8702802 / …の図2aを参照してください。
— user3338098 2016
負の値の使用は避けてください。すべてのブラウザで正しく機能するとは限りません。
— Grasper 2018
4

私があなたをよく理解しているなら、あなたはコンテナ（またはブロック）を中央に配置するために使用する必要があります

margin-left: auto;
margin-right: auto;

内容を左揃えにします。

text-align: left;
— eKek0
ソース
では、<pre>と<code>には何を付ければよいのでしょうか。私はそのバリエーションを試しましたが失敗しました。
— Paul Tarjan
cssクラスを使ってみましたか？
— eKek0 2009
また、> pre>のコンテナdivを使用できます
— eKek0 2009
2
私はコンテナdivを試していますが、それを機能させる唯一の方法は固定幅を使用することです（これは望ましくありません）。
— Paul Tarjan
2

通常、他の回答で述べられているように、divでmargin：0 autoを使用する必要がありますが、divの幅を指定する必要があります。幅を指定したくない場合は、マージンを使用することもできます（これは、実行しようとしていることによって異なります）。margin：0 200px; 、これにより、コンテンツが中央に配置されているように見えるはずです。私の質問に対するLeyuの回答も表示されます。

— Waleed Eissa
ソース
悲しいことに、ソリューションは強制的な水平スクロールバーでオーバーフローを作成します。オーバーフローの追加：親要素に非表示にすると、出力がスクロールバーを保証するのに十分な長さになる可能性があるため、適切ではありません。申し訳ありません：（
— Paul Tarjan
実際、私が言及したように、それは私の解決策ではありませんが、とにかく、オーバーフローの意味がわかりません。非表示の強制スクロールバーです。コンテンツを非表示にする必要があります。強制スクロールバーではありません。
— Waleed Eissa 2009
投稿の解決策では、コンテンツが実際には50％右にシフトされるため、水平スクロールバーが発生します。これにはoverflow：hiddenを削除する必要がありますが、これは私には機能しません。
— Paul Tarjan
2

コンテナ内のテキストを中央揃えにして左揃えにする最も簡単な方法は次のとおりです。

HTML：

<div>
  <p>Some interesting text.</p>
</div>

CSS：

P {
  width: 50%; //or whatever looks best
  margin: auto; //top and bottom margin can be added for aesthetic effect
}

このかなり基本的な解決策を理解するためだけにかなりの検索が必要だったので、これがあなたが探していたものであることを願っています。

— L.ガント
ソース
1 
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
— アンバー
ソース
また、幅400pxは必要ありません。それなしで可能ですか？
— Paul Tarjan
問題は、ブロックレベルの要素が、制限を設定しない限り、可能な限り最大の幅を満たすように拡張されることです。
— 琥珀色
だから、私がやりたいことは不可能ですか？
— Paul Tarjan
誰かが私が知らない秘密を知っているかもしれませんが、私の知る限りではそうです。
— 琥珀色
私はDavに同意します。おそらく、tinyMCEや、標準のHTMLテキストエリアよりも多くのカスタマイズが可能な別のリッチテキストエディタをご覧になるかもしれません。残念ながら、ハックのような結果に多くの時間を費やしてしまう可能性があります。でも頑張ってください！
— mkelley33 2009
1

これはあなたが探しているものですか？Flexbox..。

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.inside{
  height:100px;
  width:100px;
  background:gray;
  border:1px solid;
}
<section class="container">
  <section class="inside">
    A
  </section>
  <section class="inside">
    B
  </section>
  <section class="inside">
    C
  </section>
</section>
スニペットを展開

— ロニーロイストン
ソース
-1

これは動作します

<div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>
— user7212232
ソース
3
コードとその長所と短所を説明できますか？そうすれば、他の人は、完全に理解しているかもしれないし、理解していないかもしれない何かを単にコピーして貼り付けるのではなく、それから学ぶことができます。
— ロバート
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.