JSFiddle - React, Tailwind, and code Playground

by hieuns

HTML

<ul class="vmenu-tbl">
  <li>
    <span><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/facebook.png"/></span>
    <span>Facebook</span>
  </li>
  <li>
    <span><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/googleplus.png"/></span>
    <span>Google+</span>
  </li>
  <li>
    <span><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/twitter.png"/></span>
    <span>Twitter</span>
  </li>
  <li>
    <span><img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/reddit.png"/></span>
    <span>Reddit</span>
  </li>
</ul>

CSS

.vmenu-tbl {
  display: inline-block;
  list-style: none;
  padding-left: 0;
  font-size: 15px;
}
.vmenu-tbl li {
  display: table;
  width: 100%;
  margin: 0 0 2px 0;
  padding: 5px 0 6px 8px;
  background-color: #ffe6cc;
  border: solid 1px lightgray;
}
.vmenu-tbl span {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}
.vmenu-tbl span:first-child {
  width: 1px;
}
.vmenu-tbl img {
  float: left;
  margin-right: 6px;
}