JSFiddle - React, Tailwind, and code Playground

by hieuns

HTML

<div class="wrap-tbl">
  <span>
    <div class="wrap-cnt">
      <img src="http://www.web-plus-plus.com/Images/Articles/vertical-centering-elements-html/dog.png">This content with image and text is an example of perfect centering of content inside its holder, both vertically and horizontally.
    </div>
  </span>
</div>

CSS

.wrap-cnt {
  display: inline-block;
  width: 220px;
  font-size: 16px;
  text-align: justify;
  padding: 16px;
  background-color: #d7ffff;
  display: solid 1px gray;
  box-shadow: 2px 2px 8px #c0c0c0;
}
.wrap-cnt img {
  float: left;
  padding-right: 10px;
}
.wrap-tbl {
  display: table;
  width: 400px;
  height: 220px;
  background-color: #ffe6cc;
  border: solid 1px lightgray;
}
.wrap-tbl > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}