JSFiddle - React, Tailwind, and code Playground

by hieuns

HTML

<div class="wrap-flex">
  <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>
</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-flex {
  display: flex;
  width: 400px;
  height: 220px;
  justify-content: center;
  align-items: center;
  background-color: #f0fff0;
  border: solid 1px lightgray;
}