我正在尝试制作一个基本的CSS按钮。
尝试在按钮内垂直和水平居中放置文本时遇到错误。我有下面的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>
Run Code Online (Sandbox Code Playgroud)
jsfiddle用于此问题:http : //jsfiddle.net/CRpvr/
有人告诉我有一种使用的变通办法line-height: 100%
,但如果我需要多个行,则效果不佳。什么是最惯用且恰当的方法来完成此任务?