JSFiddle - React, Tailwind, and code Playground

by Liu ChangFeng

HTML

<div class="section">
  输入搜索词:
  <input />
  <img class="middle" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
  <button>搜索</button>
</div>

<div class="section">
  <div>
    这是一幅<img class="top" border="0" src="http://sandbox.runjs.cn/uploads/rs/368/wdnrrpup/faf2b2119313b07e53f.jpg" />位于段落中的图像。
  </div>
</div>

<div class="section">
  <div>
    这是一幅<img class="bottom" border="0" src="http://sandbox.runjs.cn/uploads/rs/368/wdnrrpup/faf2b2119313b07e53f.jpg" />位于段落中的图像。
  </div>
</div>

SCSS

.section {
  background-color: #CCC;
  padding: 5px;
  margin-bottom: 6px;
}

input,
button {
  height: 2em;
}

button {
  vertical-align: middle;
}

img {
  height: 50px;
  &.top {
    vertical-align: text-top
  }
  &.middle {
    vertical-align: middle
  }
  &.bottom {
    vertical-align: text-bottom
  }
}