8

何度も試行錯誤を繰り返した結果、CSS2でそれを行うための満足のいく方法を見つけることができませんでした。

これを実現する簡単な方法は<table>、以下のサンプルに示すように、それを便利なものにラップすることです。テーブルのレイアウトを避け、風変わりなトリックを避ける方法を知っていますか？

table {
  margin: 0 auto;
}
<table>
  <tr>
    <td>test<br/>test</td>
  </tr>
</table>

私が知りたいのは、固定幅なしで、またブロックである方法です。

4

6 に答える 6

9

@Jason、うん、<center>うまくいく。良い時代。ただし、次のことを提案します。

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}
<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

EDIT @Santi、ブロック レベルの要素は親コンテナーの幅を埋めるため、効果的にwidth:100%はテキストが左側に流れ、無駄なマークアップと中央に配置されていない要素が残ります。試してみてくださいdisplay: inline-block;。Firefox は文句を言うかもしれませんが、それは正しいです。また、 DIVborder: solid red 1px;の CSS に a を追加して、.my-centered-contentこれらのことを試しながら何が起こっているかを確認してください。

于 2008-09-05T17:48:53.913 に答える
4

これが最も簡単な答えになりますが、機能します。

非推奨の<center>タグを使用します。

：P

私はそれが足りないだろうとあなたに言いました。しかし、私が言ったように、それは機能します！

*震え*

于 2008-09-05T17:34:19.457 に答える
1

<table> の代わりに <div> を使用した場合も同様に機能すると思います。唯一の違いは、<table> のテキストも中央に配置されることです。それも必要な場合は、 text-align: center; を追加するだけです。ルール。

心に留めておくべきもう 1 つのことは、<div> はデフォルトで使用可能なすべての水平方向のスペースを埋めることです。開始点と終了点がわからない場合は、境界線を付けます。

于 2008-09-05T17:49:09.543 に答える
0

FF3では、次のことができます。

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

これには、最も意味的に意味のある要素を使用するという利点があります（必要に応じて、divをより良いものに置き換えます）が、IEでは失敗するという欠点があります（grr ...）

それ以外は、幅を設定せずに、JavaScriptを使用して左端を正確に配置するのが最善の策です。しかし、それを「風変わりなトリック」として分類するかどうかはわかりません。

もちろん、それはあなたが何をしたいかによります。単純なテストケースを考えると、text-align：centerを使用したdivはまったく同じ効果があります。

于 2008-09-08T18:42:29.093 に答える
0

以下は十分に機能します。位置とautoの使用に注意してください

<div style="border: 1px solid black; 
            width: 300px; 
            height: 300px;">
            <div style="width: 150px; 
                        height: 150px; 
                        background-color: blue;
                        position: relative;
                        left: auto;
                        right: auto;
                        margin-right: auto;
                        margin-left: auto;">
             </div>
</div>

注: IE で動作するかどうかはわかりません。

于 2008-09-05T17:56:44.767 に答える
0 

#wrapper {
  width: 100%;
  border: 1px solid #333;
}
#content {
  width: 200px;
  background: #0f0;
}
<div id="wrapper" align="center">
  <div id="content" align="left"> Content Here </div>
</div>

于 2008-09-05T19:19:51.107 に答える