制作CSS按钮:放置文字

Sen*_*jai 2 html css position

我正在尝试制作一个基本的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%,但如果我需要多个行,则效果不佳。什么是最惯用且恰当的方法来完成此任务?

jyc*_*753 6

只需添加一些填充:

padding:0.5em
Run Code Online (Sandbox Code Playgroud)

范例:http//jsfiddle.net/cr9ef/2/


Chr*_*ris 5

只需将按钮ID中的“高度”更改为“行高”即可。我检查了一下,它起作用了。