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

Question

我有一个圆形 < 按钮 >，里面有一个 < div > 代表一个 Unicode 图像。当前按钮设置为 border-radius: 12px; 高度：24px；和宽度：24px；而 <div> 是 font-size: 17px。< div > Unicode 图像位于内部但不居中，按钮稍微偏向一侧。

尽管 < div > 是什么字体大小，我怎样才能让 < div > 在椭圆形按钮内居中？

编辑

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

按钮的 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

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

但是，您不能将<div>s 放在<buttons>. 它是无效的 HTML

有关更多信息，请参阅此答案： 为什么 <button> 元素不能包含 <div>？

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

如果您不知道什么是短语内容，请参阅此页面：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>用一个跨度替换了你的，就是这样。