如何在 <button> 中居中 <div>？

Question

我有一个圆形，里面有一个

，代表一个Unicode 图像。目前按钮设置为border-radius: 12px;高度：24px；和宽度：24px； 是字体大小：17px。 Unicode 图像位于内部但未居中，并且按钮稍微偏向一边。

尽管 的字体大小是多少，如何让 在椭圆形按钮内居中？

编辑

我想创建一个圆形/圆形按钮，其中一个表情符号中心位于按钮的中间，尽管按钮的大小或表情符号图像的大小。

按钮的 CSS 和 div 的表情符号图像：

#emoji-button {
  border-radius: 19px;
  width: 38px;
  height: 38px;
}

#thumb-emoji:after {
  content: "\01F44C";
  font-size: 20px;
}

以及带有表情符号图像的圆形/圆形按钮：

            <button
              type="submit"
              id="emoji-button"
            >
              <div id="thumb-emoji"></div>
            </button>

但它没有居中。

有没有办法只支持表情符号图像以供点击？

【问题讨论】：

Answer 1

首先： <div> 本质上是块元素。它总是会变成 100% 宽。如果您希望它不是 100% 宽，请给它一个 display:inline-block，这样它就不会变得比需要的大。然后在父级上给它一个margin:0 auto; 或text-align:center 以使其居中。

但是，您不允许将<div>s 放入<buttons>。 这是无效的 HTML

有关更多信息，请参阅此答案： Why can't a <button> element contain a <div>?

或者，您可以在此处从 W3 中读到，预计仅在按钮中使用短语内容： https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

如果您不知道什么是短语内容，请参阅此页面： https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content

-- 如果您正在专门研究样式按钮，也许这个非常简短的教程会有所帮助： http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/

这是一个像你这样的工作按钮的小提琴： https://jsfiddle.net/68w6m7rr/

老实说，我对此没有太多问题。我只是用跨度替换了你的<div>，就是这样。

Answer 2

你能发布你的代码吗？

您不应该在按钮内使用 div。如果您需要按钮具有特定样式，请给它一个类。你可以这样做

CSS：

    button.something {
      padding: 25px;
      border-radius: 100%;
      font-size: 20px;
      border: none;
    }

HTML：

    <button class="something">&#128076;</button>

Answer 3

对于干净有效的代码，您最好使用 :before 或 :after 伪元素。默认情况下，这也会处理居中问题。

设置内容甚至很容易。仅在 css 中，如下所示：

1.

button:before {content:"\25b6";}

（根据需要将您的 unicode 值和 classes/ids 放在那里，然后在 css 中依次指定它们）

2.

或者，如果您需要在标记中指定值，请删除自定义 data-* 属性，如下所示：

<button data-myunicode="\25b6"></button>

每个按钮都有自己的值，然后将这一行放在 css 中：

button:before {content:attr(data-myunicode);} 

Answer 4

在回答之前，让我们先弄清楚一些事情。

div 是块级元素，用于内联元素，即button 元素。 浏览器会认为这是无效的，并将通过从内联元素中删除块元素来修复它。有关 box model、box generation 等 CSS 概念的更多信息，请参阅以下资源：

• https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements#Block-level_vs._inline
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

另外，如果您使用的是 IDE，请确保您已安装 linting/hinting 工具来帮助您。这些工具可以帮助您进行代码创作，因此请确保您拥有它们。如果您使用的是 VSCode 或 Sublime Editor 之类的软件，那里有很多免费的代码分析工具。

我们现在回到代码。

你说

我想创建一个带有表情符号中心的圆形/圆形按钮 尽管按钮的大小或表情符号图像的大小，按钮的中间 大小。

我继续创建了一个 plunk here，我在其中演示了这一点。本质上，我将按钮包裹在一个用作容器的 div 周围，并通过一些 CSS 魔法，我使它的高度与它的宽度相同。您可以在此 SO answer 找到更多信息。

#emoji-button 然后有一个border-radius: 100% 以便圆，width 是从父级继承的，这意味着它与容器相同，它的位置是absolute 以便适合容器.

#thumb-emoji 已更改为 span 元素。根据用户代理样式，它有text-align:center。

  <div class="button-group">
    <button type="submit" id="emoji-button">
      <span id="thumb-emoji"></span>
    </button>
  </div>

CSS：

.button-group {
  position: relative;
  width: 100px;
}

.button-group:before {
  content: "";
  display: block;
  padding-top: 100%;
}

#emoji-button {
  width: inherit;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


#thumb-emoji:after {
  content: "\01F44C";
  font-size: 200%;
}

您可以将.button-group 的宽度更改为您想要的任何宽度，它仍将保持其 1:1 的比例。

您可以在.button-group 上使用媒体查询来调整#thumb-emoji 的字体大小，方法是设置所需的断点。