CODEWITHSUNDEEP
htmlcssbutton
apil.tamang
apil.tamang

Reputation: 2725

How to position an image below text in button element?

I basically have the following 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>

If the button is replaced with the div tag, then the given CSS will correctly format the group so that the text appears above the image. Cannot reproduce that for the button. Can anyone explain why, or how it can be resolved?

Upvotes: 1

Views: 1297

Answers (2)

Stickers
Stickers

Reputation: 78666

Apparently the CSS table isn't working properly in <button> element. However, flexbox + order property works good. Also changed <div> to <span> as only phrasing content is permitted in <button> tag.

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

You could also use CSS pseudo element for the image instead of inline.

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

Upvotes: 2

Onilol
Onilol

Reputation: 1339

You can't have a div inside a button .. it's part of the specifications : http://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

You could style your button background to contain your image and it's text to contain the text you want !

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

Upvotes: 1

Related Questions