2

我正在尝试制作一个基本的 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>

这个问题的jsfiddle：http: //jsfiddle.net/CRpvr/

有人告诉我有一种解决方法line-height: 100%，但如果我需要多条线，这不会很好。实现这一目标的最惯用和正确的方法是什么？

4

6 回答 6

8

只需将按钮 ID 中的“高度”更改为“行高”。我检查了这个并且它有效。

于 2013-07-03T09:14:31.900 回答
7

只需添加一些填充：

padding:0.5em

示例：http: //jsfiddle.net/cr9ef/2/

于 2013-07-02T22:32:59.637 回答
4

添加display: table-cell; vertical-align: middle可能对您有用。

jsfiddle：http: //jsfiddle.net/CRpvr/7/

于 2013-07-02T22:33:42.237 回答
1

只需在 id="button" 上设置填充而不是高度，如下所示：

#button
{
  background:lightblue;
  border-radius: 30px;
  width: 15em;
  padding:1em;
  position:relative;
}

这将在 div 上创建顶部和底部填充，并将顶部和底部与您的措辞保持相等的距离。这也消除了在 h1 CSS 标记中对垂直对齐属性的需要。

于 2013-07-02T22:29:57.673 回答
0

只需使您的容器具有正确的高度，然后以这种方式在其中垂直对齐::

<style type="text/css">
    #button
    {
      background:lightblue;
      border-radius: 30px;
      width: 15em;
      height: 3em;
      line-height: 3em;  /*  <-- this was it ! */
      vertical-align: middle;
      position:relative;
    }
    h1 {
      vertical-align: middle;
      /*vertical-align: center;*/ /* w.t.f? */
      text-align: center;
    }
    </style>

PS，验证你的 CSS：vertical-align:center 不正确？？？

于 2013-07-02T22:32:43.403 回答
0

添加line-height:3em;到#button样式。使其值与高度相同。如果您需要两条线，请将其设为高度的一半，依此类推。只要确保你font-size的线条越小，你的线条越多。

如果您想保持font-size相同，您可以通过将高度调整为您拥有的行数来使按钮更高。

小提琴

于 2013-07-02T22:30:01.280 回答