2011-06-17 33 views
0

JoomlaのWebサイトで自分で作成したテンプレートを使用しています。私はjQueryのメニューを中心にしようとしているし、時間とコードとCSSのすべてを通過し、それを行う方法を見つけるように見えることができない!だから、私は少しの工夫をすることにしました。私は空のPNGイメージを作り、それをメニューの左側に置き、それを私が望むオフセットと同じ幅にしました。この小さなハックは、すべてのスクリーンが同じサイズであるわけではないので、実際にはほとんどのスクリーンの中央に配置されているわけではありません。私は空白のpngの幅をページが読み込まれるときに動的に変更できるので、中心が正確であることを計算する動的な方法を誰かが知っていたのだろうかと思っていましたか?align = "center"回避策

#elementID { 
    margin: 0 auto; 
} 

私は要素はこのためのCSS widthプロパティセットを持っている必要があります場所で読み:理にかなっているし、任意のヘルプは大幅に要素をセンタリングするため

+0

htmlを教えてもらえますか? – Phil

+0

なぜあなたは火かき棒やクロムでCSSを検査して、あなたが望む要素を変更するCSSレコードを追加しないのですか? – Neal

答えて

2

CSSをいただければ幸いです

・ホープこれが必ずしも当てはまるとは限りません。

margin-left: auto; 
margin-right: auto; 

それとも

margin: 0 auto; 

動作します:およそ

margin-left: auto; 
    margin-right: auto; 
3

。 :)

1

どちらかがどのように

0

CSSを使用して要素を中央揃えする典型的な方法は、margin-left:auto; margin-right:auto;です。

さらに、要素はブロックとして表示され、幅が固定されている必要があります。助け

.myelement { 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
    width:100px; 
} 

希望:

だからあなたのCSSは次のようになります。

0

margin:0 auto
は、サイトのメインコンテナ(このコンテナの親はボディです)で動作します。

#selector{ 
    width:500px; /* however wide the element is */ 
    position:absolute; 
    top:20px; /* This is whatever you want */ 
    left: 50%; 
    margin-left:-250px; /* this is half of the width */ 
}
0

が放火犯やクロムとCSSを検査してみて、あなたはとのdivに

+0

これはコメントではありません。 – Phil

+0

@Phil、これは答えです。それは問題かもしれません。 – Neal

1

場所それをしたい要素を変更するCSSのレコードを追加:あなたが幅を知っているので、

はこのような何かを試してみてくださいdivラッパー

<div id = "mainWrapper"> 

    <div id = "leftColumn"></div><!-- end leftColumn --> 

    <div id = "centerColumn"> 
    <!-- Put you menu item in here --> 
    </div><!-- end centerColumn --> 

    <div id = "rightColumn"></div><!-- end rightColumn --> 

</div><!-- end main wrapper --> 

#mainWrapper {フロート次のようにCSS:左。 幅:100%; } #leftColumn { float:left; 幅:25%; } #centerColumn { float:left; 幅:50%; } #rightColumn { float:left; 幅:25%; }