3

この質問では、順序付けされていないリストを水平方向に中央揃えにする「方法」については尋ねません。これは、インターネット上にすでに約11,000のリソースがあるためです。

代わりに、その「なぜ」の部分を聞きたいと思いました。

もっと正確に言えば、なぜこれを行うのですか

ul {
   position:relative;
   left:50%;
}
ul > li {
   position:relative;
   right: 50%;
}

これの代わりに：

ul {
   position:relative;
   left:25%;
}

両方がトリックを行うように見えるとき。何かご意見は？

4

2 に答える 2

3

その理由は、最初の方法ulはすべての場合に集中するためです-liそれが持っている子の数に依存しません。

2番目の解決策は、25％を右に配置します。これは、幅が全幅の50％を占めるのにちょうどよいが、それ以外の場合は壊れてulしまう、非常に特殊なケースで機能します。li

left親と子で使用することは、動的コンテンツを処理する場合のように、動的なrightディメンション（幅）で子を中央に配置するための非常に一般的な方法です。

場合によってはtext-align:center;機能しますが、絶対測位を使用する必要がある場合は失敗します。

ここでフィドルの例を参照してください。

于 2012-08-20T10:34:52.767 に答える
1

私はこれらのソリューションのいずれも使用していません。このhttp://jsfiddle.net/yz7jF/を確認してください。

このように書いてください：

ul {
   display:inline-block;
   *display:inline;/*For IE7*/
   *zoom:1;/*For IE7*/
}
li{
    float:left;
    text-align:left;
}
.anyParent{
    text-align:center;
}
于 2012-08-20T10:22:55.830 に答える