Question

如何在CSS3中使box（border-radius）大小更大？如果我设置height属性，例如height:10%，则不会更改，但width:10%会使框的宽度更宽。我不知道为什么会出现这种不一致。此外，当我按height: 100px调整高度时，框大小也会更改，但文字大小保持不变，尽管写了vertical-align: middle。那么我怎样才能正确地使盒子尺寸更大但文本位置位于盒子的中间呢？

另外，当鼠标盘旋在盒子上时，为什么盒子的位置会移动？

我写了JSFiddle here

Answer 1

你不能隐藏那个只能让它透明的div

div{
background:transparent;
}

Answer 2

如果您想使用svg。

，可以阅读此Easily center text vertically, with SVG

由于padding: 0px;

，框的位置会发生变化

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

并且在左侧添加了引导程序，而不是在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%;
}

Vertical text alignment

如何在CSS3中使框更大，文本的位置是否固定？

3 个答案: