Question

我基本上有以下HTML / CSS：

＆＃13;

.actionButton .parent {
  display: table;
}

/*try to put image at the bottom*/
.actionButton img.bottom {
  display: table-footer-group;
}

/*try to put div tag containing text on top*/
.actionButton .top {
  display: table-header-group;
}

＆＃13;

<div class="actionButton section">
  <button class="parent">
    <img class="bottom" src="//dummyimage.com/100">
    <div class="top">Click me!</div>
  </button>
</div>

＆＃13;

如果按钮被div标签替换，则给定的CSS将正确格式化组，使文本显示在图像上方。无法重现该按钮。谁能解释为什么，或者如何解决它？

Answer 1

显然，CSS表在<button>元素中无法正常工作。但是，flexbox + order属性效果很好。还将<div>更改为<span>，因为<button>代码中仅允许phrasing content。

.actionButton .parent {
    display: flex;
    flex-direction: column;
}
.actionButton .top {
    order: -1;
}

<div class="actionButton section">
    <button class="parent">
        <img class="bottom" src="//dummyimage.com/100">
        <span class="top"> Click me! </span>
    </button>
</div>

你也可以使用CSS伪元素代替内联。

.actionButton .parent:after {
    content: url('//dummyimage.com/100');
    display: block;
}

<div class="actionButton section">
    <button class="parent">
        <span class="top"> Click me! </span>
    </button>
</div>

Answer 2

按钮内不能有div ..它是规格的一部分：http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

您可以设置按钮背景的样式以包含图像，并将其文本包含所需的文本！

.parent{
background: url(your-image-path);
}

如何在按钮元素中的文本下方定位图像？

2 个答案: