html - 制作一个 CSS 按钮 : positioning the text

标签 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>

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

有人告诉我有一个使用 line-height: 100% 的解决方法,但如果我需要多行,这就不太奏效了。什么是最惯用和最正确的方法来完成这个?

最佳答案

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

关于html - 制作一个 CSS 按钮 : positioning the text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17436843/

相关文章:

css - 有边界的绝对位置?

javascript - 如何使用 JavaScript 单击提交按钮以 HTML 格式提交两个表单?

javascript - tinyMCE setContent 剥离结束 p 标签

javascript - jQuery QuickFit 调整不适合 div 的文本大小

javascript - Icon左侧的React-Tooltip空间

css - 如何平均分配填充

html - 垂直居中带有字形的文本

出于某种奇怪的原因检查 svg HTML 标签的 javascript RegExp 正在测试 "img"的 true 这是怎么发生的?

javascript - 从文本字段设置 Canvas 大小

c - 无法删除结构中的确定位置,数据仍然存在