Menu
I'm trying to make a rudimentary css button.
I'm encountering errors while trying to position the text vertically and horizontally centered within the button. I have this following html.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#button
{
background:lightblue;
border-radius: 30px;
width: 15em;
height: 3em;
position:relative;
}
h1 {
vertical-align: center;
text-align: center;
}
</style>
<title>Making a button...</title>
</head>
<body>
<div id="button"><h1>Click Me</h1></div>
</body>
</html>
jsfiddle for this question: http://jsfiddle.net/CRpvr/
I was told there was a workaround using line-height: 100%, but if I need more than one line, this doesnt work very well. What is the most idiomatic and proper way to accomplish this?
291
Simply change "height" within your button ID to "line-height". I checked this and it worked.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
