Scroll up on that page, there are plenty of options there.
I'll take a look at it later and report back when I find one I like best.
Are there any advantages of using a div instead of a button, and vice versa?
And what are the disadvantages of using either?
The advantage of using a div is that it's allowed to have other elements inside of it. The button must only have text inside of it.
The main reason for using a button is to give the user an obvious button to click on, mostly for form submission reasons.
text, an image, or an svg you mean, right?
This is not allowed then?https://jsfiddle.net/620aah85/
The spec for a button says:
what is phrasing content? From https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html#phrasing-content
In other words, text only.
What do you mean?
an svg isn't text, so, then that code would be invalid?
The button element, that is, <button>...</button> is only allowed have text inside of it. SVG is not text.
also a div, you say? correct?
A div can contain anything. It's short for division, which is what is used to divide up the page in to semantically meaningful sections.
So, all my button codes with svg's in them are invalid?
That's why they don't work in Firefox, or IE11.
Why didn't you tell me any of this?
I didn't know until I investigated the problem.
This is difficult looking for one way when there are many. And I don't like any of them.
Remember when I became aware of the problem? I gave one best solution to center both vertically and horizontally.
I don't remember.