2017-01-19 10 views
0

私は現在divを持っています。固定されたdivを中央に配置できません

正しく動作していますが、divの位置はもうありません。

私はマージンを試しました:自動&テキストアライメント:中央ですが、まだ何もありません。私は主なものの周りにdivを持っていて、外れたものは固定されていましたが、まだ何もありませんでした。

位置なし:どのようにしたいかを調整します。位置:固定;それはちょうど左に行くでしょう。

誰かが解決策を知っていますか?

+1

を使用することができ、関連するすべてのコードを追加してください。 – sol

+0

ヘルプセンターをご覧になり、良い質問をする方法をご覧ください。デバッグの助けを求める質問(「なぜこのコードは動作しませんか?」)には、目的の動作、特定の問題またはエラー、および質問自体の中でそれを再現するのに必要な最短コードが含まれていなければなりません。 – Pete

答えて

1

left: 0right: 0;を中心にして、fixed要素を配置する必要があります。

.dd { 
 
    position: fixed; 
 
    width: 50%; 
 
    height: 100px; 
 
    background: lightgreen; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
}
<div class="dd"></div>

+0

ありがとうございました!なぜ私が左に追加する必要があるのか​​を詳しく説明できますか:o;右:o;私は部分的にHTML/CSSの新機能です。 –

+0

'margin:0 auto;'要素を中央に揃えます。固定要素は、それらの間の中央に置かれる左右の辺の定義を必要とする。デフォルトでleftは0、rightはautoです。右に0を設定すると、要素をセンタリングするために領域をウィンドウ幅に伸ばします。これは、デフォルトではこの領域の幅が要素自体の幅に等しいためです – Banzay

0

あなたが位置合わせしたい場合は、次の固定要素を、あなたはトップに座標値を追加する必要があります、左、右、下。または少なくとも2つ

position: fixed; 
top: 50%; 
left: 50%; 

0/0座標は要素の左上隅にあるため、要素を正確に中央揃えにする必要があります。

あなたは

transform: translate(-50%, -50%); 
0

使用toplefttransform

.fixed{ 
 
    position:fixed; 
 
    width:200px; 
 
    height:200px; 
 
    background-color:green; 
 
    left:0; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
}
<div class="fixed"> 
 
</div>

関連する問題