如何在按钮下方定位绝对标签并在 div 中居中

Question

我正在尝试实现这种布局：

我有这个：

  <div class="button-wrapper">
        <button>
            <i></i>
        </button>
        <label>Carregamento Telemóvel</label>
   </div>

我的标签必须定位在absolute，因为它不能占用div 中的空间。 div 必须是按钮的宽度。

有什么想法吗？

编辑：对不起，我的问题有点匆忙，所以它不完整。我现在将详细解释。

1. 我需要所有 div 都具有响应性并且没有固定宽度。
2. 按钮本身与其他按钮的布局相同。
3. 按钮之间必须有相同的边距，这就是为什么我不能有标签的原因，因为文本的长度永远不会相同，所以 div 的大小会不同，然后我不能给出它们之间的边距相同。

解决办法：

http://plnkr.co/edit/NYOb3uQnYrNFkfO6RaIG?p=preview

plunker 只在 -webkit- 中工作，但这就是我所需要的。

Answer 1

使标签居中的技巧是 CSS3 变换

.button-wrapper label {
  position: absolute;
  top:100%;
  left: 50%;
  transform:translateX(-50%);
  color: orange;
  font-weight: bold;
}

body {
  text-align: center;
}

.button-wrapper {
  display: inline-block;
  margin: 1em;
  position: relative;
}

.button-wrapper i {
  font-size: 72px;
  background: orange;
  line-height: 1.4em;
  width: 1.4em;
  border-radius:50%;
  display: block;
}

.button-wrapper label {
  position: absolute;
  top:100%;
  left: 50%;
  transform:translateX(-50%);
  color: orange;
  font-weight: bold;
}

<div class="button-wrapper">

  <i>K</i>

  <label>Carregamento Telemóvel</label>
</div>

Answer 2

.button-wrapper {
  display: inline-block;
  max-width: 80px;
  text-align: center;
}
.button-wrapper > button {
  border-radius: 50%;
  height: 40px; width: 40px;
  background-color: orange;
  position: relative;
  border: 0 none;
  display: inline-block;
}
.button-wrapper > button > i {
  display: block;
  height: 10px;
  width: 10px;
  background-color: #ffffff;
  margin-top: -5px;
  margin-left: -5px;
  left: 50%;
  top: 50%;
  position: absolute;
}
.button-wrapper > label {
  display: block;
  font-size: 11px;
  color: orange;
}

<div class="button-wrapper">
        <button>
            <i></i>
        </button>
        <label>Carregamento Telemóvel</label>
</div>

Answer 3

没有看到您的代码，很难为您提供帮助。但是你可以通过结合margin:0 auto; left:0; right:0;来居中一个绝对定位的块元素

JSFiddle - http://jsfiddle.net/vfs3n68e/

Answer 4

这是我快速创建的一个非常简单的方法：https://jsfiddle.net/rn8ysg5q/

HTML：

<div class="button-wrapper">
  <button>
    <i></i>
  </button>
  <br />
  <label>Carregamento Telemóvel</label>
</div>

CSS：

.button-wrapper
{
    /*border: 1px dotted red;*/
    color: orange;
    width: 100px;
    position: relative;
    text-align: center;
}

/* Reset button layout */
.button-wrapper button
{
    background: none;
    border: 0;
    color: inherit;
    /* cursor: default; */
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
       -moz-user-select: none;
        -ms-user-select: none;    
}

.button-wrapper button
{
    width: 60px;
    height: 60px;
    background-color: orange;
    border-radius: 50%;
}

如果这就是你要找的东西，我会在一小时后回家更新它并进行一些改进。