CSS：固定小数点を中心に

私は固定配置されたdivのために、ビューポートの下部に留まるクラスを持っています。私は幅を自動的に変更しようとしているので、divの幅が変更されると、中央に残っています。CSS：固定小数点を中心に

.box { 
position: fixed; 
width: 80%; 
bottom: 20px; 
left: 50%; 
margin: 0 0 0 -40%; 
max-height: 50%; 
overflow: auto 
}

私はテキストアラインメントを持つコンテナを試しました。中央に表示：インラインですが、狂った結果が出ました。

2012-01-13 Myforwik

.box { 
    position : fixed; 
    left  : 10%; 
    right  : 10%; 
    bottom  : 20px; 
    max-height : 50%; 
    overflow : auto; 
}

あなたは（代わりに幅を使用しての）要素をセンタリングするために一緒にleftとrightを使用することができます。

あなたが幅を使用する場合、あなたはこれを行うことができます：あなたはこれを行うことができ、固定要素内にHTMLを中央にしたい場合は

.box { 
    position : fixed; 
    left  : 10%; 
    width  : 80%; 
    bottom  : 20px; 
    max-height : 50%; 
    overflow : auto; 
}

を：ここで

.box > div { 
    width  : 50%; 
    min-width : 150px; 
    margin  : 0 auto; 
    text-align : center; 
}

2012-01-13 00:53:03 Jasper

それでも80％の幅を維持しますか？私はそれが含まれているデータに基づいて動的であることを望んでいます - 例えば、単語がちょうど1つの単語を含む場合、その単語は小さなdivの中心になければなりません、ビューポートの80％を占めるdivではありません。 – Myforwik

デモをチェックアウトしてください。ネストされたdivはまさにそれを行います。境界線と背景色を削除すると、テキストはビューポートの中央に浮かびます。 – Jasper

ありがとう。私はIE6にあったし、CSSの>が機能しないことを忘れる。 – Myforwik

.centered { position: fixed; top: 50%; left: 50%; margin-top: -[1/2(element-height)]; margin-left: -[1/2(element-width)];}

この作品は、

2013-09-26 17:51:12

答えて