How to make box bigger in CSS3, with the position of text fixed?

Question

How can I make box (border-radius) size bigger in CSS3? If I set height property, such as height:10% , it doesn't change, but width:10% makes the width of box wider. I don't know why such inconsistency occurs. Also, when I resize the height by height: 100px , the box size changes, but the text size remains the same, despite writing vertical-align: middle . So how can I correctly make the box size larger but the text position is located in the middle of the box?

Also, why does the position of box move when the mouse hovers over the box and not?

I wrote JSFiddle here

Answer 1

you can not hide that div you can only make it transparent

div{
background:transparent;
}

Answer 2

you can read this Easily center text vertically, with SVG if you want to use svg.

the position of the box changes because of padding: 0px;

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

and bootstrap is added on you left side not in the css

and the correct link for that looks like this

under External Resources //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap-theme.css

Demo : http://jsfiddle.net/rXNmA/2/

and for the position of the text you can use the

class=text-center 

and

line-height: 2em; 

or

line-height: 2%;

depending on what you want to achive

Demo: http://jsfiddle.net/rXNmA/5/

Answer 3

It doesn't take the percentage height, because this div size depends of the "whole page" tall. Change the body to 100% height and it will work.

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

Vertical text alignment