按鈕不動，以事業部

的中心，使我有這樣的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>

和我想的按鈕位置，這樣他們將在.title僞div的中心。

我的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; 
}

當我的位置是：絕對的，在頁面的中心，這對我來說沒有任何意義的所有elems的位置，因爲每個.button的祖先都是一個id爲questionTitle的div，所以它應該相對於這個定位。

爲什麼按鈕位於頁面的中心，以及如何使它們位於div的中心？

來源

2012-11-21 praks5432

Position: absolute使該屬性消失它的容器。它基本上可以釋放元素來做任何想要的事情。

我做了一個小提琴並解決了您的問題。我將它更改爲position: relative並居中它們。顯然，由於你的百分比有很大的差異，所以這並不是註定要在第一時間工作的，這是最好的。

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

來源

2012-11-21 01:31:09 Jonathan

的一切，如果你在它的祖先定位絕對元素將是絕對的定位相對於第一非靜態定位的元素首先，在這裏它到達身體的祖先，它適合於50％/ 50身體尺寸的百分比。有關定位檢查的參考：http://www.w3schools.com/cssref/pr_class_position.asp。

在標題css中放置一個'position：relative'來獲得所需的結果。此外，如果您想將按鈕完美居中放置，然後減去您嘗試居中的按鈕的一半像素。您可以通過應用按鈕寬度的一半的負邊距來完成此操作。

我已經測試瞭解決方案，只要IE6和它的作品。

來源

2012-11-21 01:42:57

正如喬納森所說，你不應該使用絕對位置，因爲它不會相對於父母。也許你根本不需要使用職位。讓瀏覽器做正確的事情。使用這種垂直顯示的按鈕：

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

http://jsfiddle.net/7dYAA/

如果你想從左至右的按鈕，獨自離開的定位，只是添加一些填充：.title { padding: 10px 10%; }和/或利潤率/填充的按鈕。請參閱http://jsfiddle.net/HY8UR/

來源

2012-11-21 01:56:06 mikeslattery

添加中斷標記。

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

</div>

CSS

.button{ 

    height:30px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    font-family: Arial; 
    font-weight: normal; 

} 

.title{ 

    text-align: center; 
    -moz-border-radius: 15px; 
    border-radius: 15px; 
    width: 30%; 
    height: auto; 
    background: #BDBDBD; 

}

來源

2012-11-21 06:07:09 Nandhakumar

您可以使用文本對齊：中心;父：

<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-21 06:15:21 chovy

按鈕不動，以事業部

回答

相關問題