96

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

例が最も役立ちます

このページ：

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

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

4

9 に答える 9

22

他の質問からの実用的な回答を再投稿:可変幅のフローティング要素を水平方向に中央揃えにする方法は?

フローティングされて中央に配置される要素が 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に関する良いリファレンスは次のとおりです。

于 2009-08-13T02:21:37.277 に答える
5

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

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

内容を左揃えにします。

text-align: left;
于 2009-08-13T01:37:05.450 に答える
2

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

于 2009-08-13T01:56:39.903 に答える
1 
<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>
于 2009-08-13T01:40:27.207 に答える
1

まだ古いブラウザを使用している私たちのために、拡張された下位互換性を以下に示します。

<div style="text-align: center;">
    <div style="display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; text-align: left;">
        Line 1: Testing<br>
        Line 2: More testing<br>
        Line 3: Even more testing<br>
    </div>
</div>

この投稿に部分的に触発されました: https://stackoverflow.com/a/12567422/14999964。

于 2021-01-18T03:16:20.890 に答える
-1

これは機能します

<div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶&lt;/span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷&lt;/span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸&lt;/span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹&lt;/span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>
于 2017-03-19T03:04:12.003 に答える