web-dev-qa-db-ja.com

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

ブロック全体をその親の中央に配置したいのですが、ブロックのコンテンツを左揃えにする必要があります。

例が最適です

このページで：

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

asciiアートは（表示されるように）中央に配置する必要がありますが、整列して「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

エラーメッセージは、コンソールの場合と同様にすべて並んでいるはずです。

cssalignmentcenter
62
Paul Tarjan

他の質問からの実際の答えを再投稿する： 可変幅の浮動要素を水平方向に中央揃えするには？

フローティングされて中央に配置される要素が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

17
Paul Tarjan

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

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

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

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

そしてその内容を左揃えにします：

text-align: left;
3
eKek0

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

2
Waleed Eissa

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

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
}

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

1
L.Gaunt

これはあなたが探しているものですか？フレックスボックス...

.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
Ron Royston
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
1
Amber