如何将图像放置在按钮元素中的文本下方？

Question

我基本上有以下HTML/CSS：

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

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

如果按钮被替换div标签，然后在给定的CSS将正确地使文本显示上述格式的组图片。无法重现该按钮。任何人都可以解释为什么，或者如何解决？

Answer 1

显然，CSS表在<button>元素中不能正常工作。但是，flexbox + order属性效果不错。 <div>也更改为<span>，因为只有phrasing content被允许在<button>标记中。

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