JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.screwfix.com/21092B/assets/css/sfx.min.css?timestamp=1418040466">
<table class="table">
    <tbody>
        <tr>
            <td>
                <ul>
                    <li>
                        <button class="btn btn--addr">
                            <em> <!-- Added wrapper -->
                                why? <br />
                                are these centered vertically? <br />
                                And how to remove it?
                            </em>
                        </button>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

<style>
.btn.btn--addr {
    display: block;
    position: relative;
    background-color: pink;
    width: 100%;
    min-height: 200px;
}

.btn.btn--addr > em {
    display: inline-block;
    vertical-align: top;
}

.btn.btn--addr:after {
    content: "";
    display: inline-block;
    vertical-align: top;
    min-height: inherit;
}
</style>

CSS

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
/**
 * Important resets to make life a bit easier
 */
ol,
ul,
dl,
dd,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
table,
th,
td,
caption {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
/**
 * Make alt texts visually different if images doesn't load
 */
img {
  font-style: italic;
}
/**
 * Like cursor: pointer;?
 */
a,
button,
select,
option {
  cursor: pointer;
}
/**
 * Remove outlines.
 * It's important that you give the user some kind of visual
 * confirmation that an element is focused, but do it in ui/main
 * instead of with browser default outlines.
 */
button:not(.outline):focus,
input:not(.outline):focus,
textarea:not(.outline):focus,
div:not(.outline):focus,
button:not(.outline):active,
input:not(.outline):active,
textarea:not(.outline):active,
div:not(.outline):active {
  outline: none;
}
/* remove IE clear marker */
input::-ms-clear {
  display: none;
}
/**
 * Form related resets
 */
fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
/**
 * Removing default appearances for input fields in Webkit and Gecko browsers,
 * since otherwise iOS Safari, probably amongst other browsers, would make stuff look a bit bad.
 */
input:not([type="radio"]):not([type="checkbox"]) {
  -webkit-appearance: none;
  -moz-appearance: none;
}
input {
  background-color: transparent;
  border: none;
}
/**
 *  Reset buttons. A lot.
 */
button {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 1;
}
/**
 * Reset height and widths of html and body,  */
html,
body {
  min-width: 100%;
  min-height: 100%;
}
html {
  height: 100%;
  font-size: 62.5%;
}
/**
 * Forcing smooth text in Webkit browsers.
 * One could use the wildcard selector, and not have to worry about inheritance
 * problems (since -webkit-font-smoothing is far from a standard property it
 * doesn't have any standard inheritance definitions it seems), but...