CSS適切なセンターコンテンツへの方法

私はCSSベースの設計を好むが、バックエンドコーダーのほうがCSSのスキルは少し弱い。私がレイアウトに関わると、何年ものテーブルベースの虐待によって私の心が歪んでしまったので、私はテーブルベースのフォーマットに転用する傾向があります。私はいつも旅に出る一つの特別な問題があります。私は時々使用CSS適切なセンターコンテンツへの方法

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

：

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

しかし、これはかなり右いないように最善のCSSの選択肢は何ですか。私はテキストを整列しようとしていない、私はコンテンツを整列しようとしている。また、これは囲まれた要素のテキストの配置に影響を与えるように思われます。修正するためには調整が必要です。私が得ることのないことの1つは、なぜ浮動小数点型がないのですか：中央のスタイルですか？それが最善の解決策になるようです。うまくいけば、私は何かが欠けているし、これを行うには完璧なCSSの方法があります。

出典

2009-04-06 Paul Keister

text-alignはテキストを整列させるためのものです。実際にはInternet Explorerだけで、テキスト以外のものに中心を置くことができます。他のブラウザはこれを正しく処理し、ブロック要素にtext-alignの影響を与えません。

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

float: center;が存在しないのは、フローティングは要素（通常は画像）を左または右に配置し、その周りにテキストフローを配置するためです。この文脈では、テキストが要素の両側に流れる必要があることを意味するので、中央に何かを浮かべては意味がありません。

出典

2009-04-06 19:07:08 Guffa

テーブルでうまくキャッチ。私はそれを十分に見ていませんでした。 –

こんにちは、お返事ありがとうございます。しかし、どのように 'マージン：0自動;'魔法は、私はゼロと自動価値がテーブルの中心になる理由を理解していないのですか？ – GMsoF

@GMsoF：ゼロは垂直マージンで、autoは水平のマージンです。 'margin：0 auto;'は、margin：0 auto 0 auto;の短縮形であり、 'margin-top：0; margin-right：auto; margin-bottom：0; margin-left：auto; ' – Guffa

私はキャッチは、あなたが一定の幅を設定しなければならないということであるあなたの<td>に<div>を入れてstyle="width: 200px; margin: 0 auto;"

にスタイル属性を設定することをお勧めします。

編集： もう一度質問をしてみると、テーブル全体を廃棄することをおすすめします。ちょうど<div style="width: 200px; margin: 0 auto;>を私が示唆したように使用し、テーブルの必要はありません。

出典

2009-04-06 18:43:22

こんにちはおかげで答え、それが役立ちます。しかし、どのようにマージン：0自動;魔法は、私はゼロと自動価値がテーブルの中心になる理由を理解していないのですか？ – GMsoF

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

他のコメントに答えるには、「これは囲まれた要素のテキストの配置に影響を与えるように思われます。修正するには調整が必要です」それがCSSの仕組みの性質です。要素のプロパティを設定すると、その要素のいずれかでそのプロパティがオーバーライドされている場合を除き、すべての子要素に影響があります（もちろん、プロパティはinheritedです）。

出典

2009-04-06 18:50:33

どこにいるのですか？私にとっては - 私はほとんどの場合、サイトの全体のデザインを中心にしようとしていますので、私は通常、この操作を行います。まだあなたのテキストのすべてを残しながら

<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-06 18:58:17

ここには、CSSを使用したセンタリングのための優れたリソースがあります。
http://www.w3.org/Style/Examples/007/center
これは、テキスト、ブロック、画像を中央に配置する方法を示しています。固定幅なしtext-align:centerと中心コンテンツを有効にする

出典

2009-04-06 19:11:32

使用display:inline-block：

<!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-20 22:04:34

これは素晴らしいトリックです！ –

CSS適切なセンターコンテンツへの方法

答えて

関連する問題