0

だから私はこのHTMLを持っています-

    <div class="title" id="questionTitle">
    <input type="button" class="button green" value="Save"/>
    <input type="button" class="button blue" value="Preview"/>
    <input type="button" class="button yellow" value="Save And Exit"/>
    <input type="button" class="button red" value="Exit Without Saving"/>
</div>

ボタンを.titledivの中央に配置しようとしています。

私のCSSは

.button{
top:50%;
left:50%;
height:30px;
-moz-border-radius:10px;
border-radius:10px;
font-family:Arial;
font-weight:normal;
position:absolute;
top:50%;

}

.title{
    -moz-border-radius:15px;
    border-radius:15px;
    width:30%;
    height:100px;
    background:#BDBDBD;
}

position：absoluteを実行すると、ページの中央にあるすべての要素の位置がわかりません。これは、各.buttonの祖先がid questionTitleのdivであるため、それを基準にして配置する必要があるためです。

ボタンがページの中央に配置されているのはなぜですか。また、ボタンがdivの中央に配置されるようにするにはどうすればよいですか。

4

5 に答える 5

0

Position: absolute属性をコンテナにします。基本的に、要素を解放して、必要なことを実行します。

私はフィドルをしてあなたの問題を修正しました。に変更してposition: relative中央に配置します。明らかに、パーセンテージにはかなりのばらつきがあるので、これはそもそも機能するように運命づけられていません。これは、それが得るのと同じくらい良いです。

http://jsfiddle.net/jaEpt/1/

于 2012-11-21T01:31:09.563 に答える
0

まず、要素を絶対に配置すると、その要素はその祖先の最初の非静的に配置された要素に対して絶対的に配置され、ここでそれは体の祖先に到達し、体の寸法の50％/ 50％に適合します。ポジショニングチェックのリファレンスについては、http ：//www.w3schools.com/cssref/pr_class_position.aspをご覧ください。

目的の結果を得るには、タイトルcssに「position：relative」を配置します。また、ボタンを完全に中央に配置する場合は、中央に配置しようとしているボタンのピクセルの半分を減算します。これを行うには、ボタンの幅の半分の負のマージンを適用します。

私はIE6までソリューションをテストしましたが、それは機能します。

于 2012-11-21T01:42:57.153 に答える
0

ジョナサンが言ったように、親に対して相対的ではないため、絶対位置を使用しないでください。おそらく、位置をまったく使用する必要はありません。ブラウザに正しいことをさせてください。これを使用して、ボタンを垂直に表示します。

.button {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
}

http://jsfiddle.net/7dYAA/

ボタンを左から右に配置したい場合は、配置をそのままにして、ボタンに padding:.title { padding: 10px 10%; }および/または margin/padding を追加します。http://jsfiddle.net/HY8UR/を参照してください

于 2012-11-21T01:56:06.840 に答える
0

text-align: center; を使用できます。親で：

<div class="title">
    <input type="button" value="Save"/>
    <input type="button" value="Preview"/>
    <input type="button" value="Save And Exit"/>
    <input type="button" value="Exit Without Saving"/>
</div> 

.title { text-align: center; border: 1px solid #090; background: #efe; padding: 20px; }
.title [type=button] { display: inline; }

http://jsfiddle.net/chovy/cDafD/1/

于 2012-11-21T06:15:21.727 に答える