5

私は CSS ベースのデザインで作業することを好みますが、バックエンド コーダーが多いため、CSS スキルは少し苦手です。レイアウトに関わると、表ベースの書式設定に頼る傾向があります。これは、何年にもわたる表ベースの乱用によって心が歪んできたためです。私がいつもつまずく特定の問題が 1 つあります。以下に代わる最良の CSS は何ですか。

<table width="100%">
    <tr>
        <td align="center">
            content goes here
        </td>
    </tr>
</table>

私は時々使用します：

<div style="width:100%; text-align:center">content</div>

しかし、これはあまり正しくないようです。テキストを揃えようとしているのではなく、コンテンツを揃えようとしています。また、これは囲まれた要素のテキストの配置に影響を与えるようで、修正するには微調整が必​​要です。私が得られないことの1つは、なぜfloat:centerスタイルがないのですか? それが一番の解決策になりそうです。うまくいけば、私は何かが欠けていて、これを行うための完璧な CSS の方法があります。

4

6 に答える 6

10

text-alignテキストの整列を目的としているのは正しいです。テキスト以外のものを中央に配置できるのは、実際には Internet Explorer だけです。他のブラウザはこれを正しく処理し、ブロック要素が の影響を受けないようにしtext-alignます。

css を使用してブロック要素を中央に配置するmargin: 0 auto;には、Joe Philllips が提案したように使用します。テーブルをまったく保持する必要はありませんが。

存在しない理由float: center;は、フローティングは要素 (通常は画像) を左または右に配置し、それらの周りにテキストを流すことを目的としているためです。中央に何かを浮かせることは、このコンテキストでは意味がありません。テキストが要素の両側に流れなければならないことを意味するからです。

于 2009-04-06T19:07:08.047 に答える
5

を入れて、スタイル属性をに設定することをお勧め<div>します<td>style="width: 200px; margin: 0 auto;"

問題は、固定幅を設定する必要があることです。

編集： 質問をもう一度見た後、テーブルを完全に廃棄することをお勧めします。私が提案したようにa を使用するだけ<div style="width: 200px; margin: 0 auto;>で、テーブルは必要ありません。

于 2009-04-06T18:43:22.597 に答える
3

これは、CSSを使用してセンタリングするための優れたリソースです。
http://www.w3.org/Style/Examples/007/center
これは、テキスト、ブロック、画像を中央揃えにする方法と、それらを垂直方向に中央揃えする方法を示しています。

于 2009-04-06T19:11:32.247 に答える
1

固定幅なしでコンテンツdisplay:inline-blockを有効にして中央に配置するために使用します。text-align:center

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Centering</title>

  <style type="text/css">
  .container { text-align:center; }

  /* Percentage width */
  .wrapper { width: 99%; }

  /* Use inline-block for wrapper */
  .wrapper { display: inline-block; }

  /* Use inline for content */
  .content { display:inline; }
  </style> 

</head>
<body>
  <div class="container">
    <div class="content">
        <div class="wrapper">
            <div>abc</div>
            <div>xyz</div>
        </div>
    </div>
  </div>
</body>
</html>
于 2012-10-20T22:04:34.413 に答える
1

これを一般的に行っているのはどこですか? 私にとって - 私はほとんどの場合、サイトのデザイン全体を中央に配置しようとしているので、通常は次のようにします。

<html>
  <body>
  <div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
  </body>
</html>


body {text-align:center;}
#wrapper {margin:0 auto; text-align:left; width:980px;}

これにより、デザイン全体が幅 980px でページの中央に配置されますが、すべてのテキストは左揃えのままになります (そのテキストが要素内にある限り#wrapper)。

于 2009-04-06T18:58:17.663 に答える
0

d03boyの答えは、物事を中心に置く正しい方法です。

他のコメントに答えるには、「また、これは囲まれた要素のテキストの配置に影響を与えるようです。修正するには調整が必要です。」これが CSS の仕組みの性質であり、要素にプロパティを設定すると、プロパティがそれらのいずれかによってオーバーライドされない限り、そのすべての子に影響します (もちろん、プロパティが継承されるものであると仮定します)。

于 2009-04-06T18:50:33.500 に答える