Question

我正在尝试制作一个基本的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%的解决方法，但如果我需要多行，这不能很好地工作。什么是最恰当和恰当的方法来实现这一目标？

Answer 1

只需添加一些填充：

padding:0.5em

样品： http://jsfiddle.net/cr9ef/2/

Answer 2

添加display: table-cell; vertical-align: middle可能适合您。

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

Answer 3

简单地改变＆＃34;身高＆＃34;在您的按钮ID中，以＃34;行高＆＃34;。我查了一下它就有效了。

Answer 4

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

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

这将在div上创建一个顶部和底部填充，并将顶部和底部的距离与您的措辞分开。这也消除了对h1 CSS标记中的vertical align属性的需要。

Answer 5

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

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

Fiddle

Answer 6

只需将容器设置为正确的高度，然后以这种方式垂直对齐::

<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不正确???

制作CSS按钮：定位文本

6 个答案: