Question

我有一轮＆lt;按钮＆gt;用＆lt; div>里面代表一个Unicode图像。目前按钮设置为border-radius：12px;身高：24px;和宽度：24px;并且＆lt; div>是字体大小：17px。＆lt; div> Unicode图像位于内部但未居中，按钮略微偏向侧面。

我怎样才能得到＆lt; div>尽管字体大小为＆lt; div>是

修改

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

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

#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>放入<buttons> 。 无效HTML

有关更多信息，请参阅此答案： https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

或者，你可以在这里看到，从W3开始，只需要在一个按钮内使用短语内容： 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/

这是像你这样的工作按钮的小提琴： {{3}}

老实说，我没有遇到很多问题。我只用一个跨度替换了你的<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值和class / id放在一起，然后在css中依次指定它们）

2

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

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

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

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

Answer 4

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

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

此外，如果您使用的是IDE，请确保已安装linting / hinting工具来帮助您。这些工具可以帮助您进行代码编写，确保您拥有它们。如果您使用的是VSCode或Sublime Editor等软件，那么有许多免费的代码分析工具。

现在让我们回到代码。

你说

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

我继续前进并创建了一个here插件，我演示了这一点。基本上，我将按钮包裹在div周围作为容器，并通过一些CSS魔术，我使它具有与其宽度相同的高度。更多信息，你可以在这个SO answer找到。

然后#emoji-button有border-radius: 100%才能成为圆形，width是从父级继承的，这意味着它与容器相同，位置为{{1}为了适应容器。

absolute已更改为#thumb-emoji元素。根据用户代理样式，它具有span。

text-align:center

CSS：

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

您可以将.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%; }宽度更改为您想要的任何宽度，它仍将保持1：1的比例。

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

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

4 个答案: