如何在固定文本位置的情況下使CSS3中的框變大？

Question

如何在CSS3中增大框（邊界半徑）的大小？ 如果我設置height屬性，例如height:10% ，它不會改變，但是width:10%會使盒子的寬度變寬。 我不知道為什么會發生這種不一致的情況。 另外，當我按height: 100px調整高度時，框的大小會發生變化，但是盡管寫了vertical-align: middle ，但文本大小仍保持不變。 那么，如何正確地增大框的大小，但文本位置位於框的中間呢？

另外，當鼠標懸停在框上時，框的位置為何移動？

我在這里寫了JSFiddle

Answer 1

您不能隱藏該div，只能使其透明

div{
background:transparent;
}

Answer 2

如果您想使用svg ，則可以使用SVG 輕松垂直閱讀此文本。

框的位置由於padding: 0px;更改padding: 0px;

.dropdown:hover .dropdown-menu {
    display: block;
    padding: 0px;/* remove this*/
    margin: 0px;
}

並且bootstrap被添加在您的左側而不是css中

正確的鏈接看起來像這樣

在外部資源下 //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.css

演示 ： http : //jsfiddle.net/rXNmA/2/

對於文本的位置，您可以使用

class=text-center 

和

line-height: 2em; 

要么

line-height: 2%;

取決於您要達到的目標

演示： http ： //jsfiddle.net/rXNmA/5/

Answer 3

它不采用百分比高度，因為此div大小取決於“整個頁面”的高度。 將身體更改為100％的高度，它將起作用。

html, body {
    height: 100%;
}
div {
    height: 10%;
}

垂直文字對齊