1

私は現在、内部のテキストではなく、オブジェクト（必要に応じてボックス）自体のように、水平方向に中央揃えしようとしています。私は多くの提案を試み、多くのチュートリアルに従いましたが、何も機能しません...最終的にマージンを自分で設定しましたが、動的に調整したいと思います。これは私が現在持っているコードです:

.navbar { 
    margin:auto;
    margin-left:30em;
    display:none;
    position:fixed;
    top:0px;
    list-style-type:none;
    padding:0;
    overflow:hidden;
    z-index:200;
}
.navbar li {
    float: left;
    display:inline;
    width:120px;
    text-align:center;
}
.navbar #left {
    left:0px;
    width:100px;
    height:35px;
    background:url('res/navigation.png') 0 0;
}

... 等々。HTML は非常に単純で、対応する class 属性と id 属性を含むリストだけです。

4

7 に答える 7

2

あなたが持っているので、設定する多くのソリューションによって提案されたソリューションmargin: 0 auto;は機能しません;）position: fixed;ul

私の考えでは、配置された要素を中央に配置する良い方法は次のとおりです。

.someelement{
    width: 600px;
    position: fixed;
    left: 50%;
    margin-left: -300px; //here we put half of the element's width
}

この方法の実際の例をここで見ることができます: http://jsfiddle.net/skip405/G8LrV/ この方法の唯一の問題は、固定幅を設定していることです。

幅が変わる可能性のある要素がある場合、たとえば jQuery などで動的に計算してから、負のマージンを設定する必要があります。

実際の例はここで見ることができます: http://jsfiddle.net/skip405/G8LrV/1/

于 2012-07-22T22:32:48.067 に答える
1

margin: 0 auto他の人が述べたように、そしてあなたがすでに試したと思うように、CSSでセンタリングするには使用が必要です。

これがうまくいかなかった理由は、オブジェクトに が定義さwidthれていて、ブロック タイプのdisplayプロパティ (または のいずれdisplay:blockかdisplay:inline-block) が必要なためです。

blockこの方法で操作できるのはブロックのみであるため、 である必要があります。

ブロックはデフォルトでコンテナーの幅の 100% に設定されているwidthため、ブロックが中央に配置される余地がないため、これが必要です。px幅は、コンテナーのサイズに合わせたい場合ではなく、パーセンテージにすることもできますが、設定する必要があります。

それでも問題が解決しない場合は、Firebug (または同様のもの) を使用してみて、ブラウザーがボックスで何をしていると考えているかを調べてください。ここで問題を見つけることができます。

それでも解決しない場合は、JSFiddle の例を作成してください。これは、何が起こっているかを確認するのに役立ち、ここで表示するものも提供します。

于 2012-07-22T21:40:32.290 に答える
1

<ul>少しトリッキーで、コンテナに入れる必要があります。次に、次の css を使用します。

div {
    text-align: center;
}

ul {
    text-align: left;
    display: inline-block;
    width: auto;
}

divの周りのコンテナはどこですかul。

ライブデモについては、このフィドルを参照してください

于 2012-07-22T21:50:24.647 に答える
0

コンテナに対してdivを中央に配置するには、行う必要があります

width:75%;
margin-left:auto;
margin-right:auto;

そうすれば、オブジェクトは自分自身を中心に置くことができます。

于 2012-07-22T21:28:51.950 に答える
0

を機能させるには、明示的な幅を設定する必要がありますmargin:0 auto。

代わりに、幅が不明な場合に、ここで見られるように、いくつかの位置トリックを使用することもできます。

display:noneから削除する必要があります。そうし.navbarないと、何も表示されません。含まれていない作業中の他のコードがない限り。

于 2012-07-22T21:36:24.303 に答える