Question

我试图实现这种布局：

我有这个：

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

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

有什么想法吗？

编辑：对不起，伙计们，我的问题有点急，所以不完整。我现在将详细解释。

我需要所有的div响应并且没有固定的宽度。
按钮本身包含在一行中，其他按钮的布局相同。
按钮必须在它们之间具有相同的边距，这就是为什么我不能使用标签，因为文本的长度从来都不一样所以div会有不同的大小，然后我就不能给它们留下相同的余量。

解决方案：

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

plunker只能在-webkit中使用 - 但这只是我需要的。

Answer 1

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

使标签居中的技巧是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 3

如果没有看到您的代码，很难帮助您。但是，您可以通过组合margin:0 auto; left:0; right:0;

来居中一个绝对定位的块元素

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

Answer 4

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

HTML：

.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%;
}

CSS：

{{1}}

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

如何在按钮下方放置绝对标签并在div中居中

4 个答案: