图像标记和标题内容在html中不在同一行中

我想在同一行中显示图像和标题内容，但它在不同的行中出现

水质：良好

在这里：

HTML: 向col-sm-12元素添加.my header类或其他内容

<div class="container">
     <div class="row">
        <div class="col-sm-12 my-header" align="center">
             <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" />
             <h3 align="center">Water Quality  :<span id="headerValue"> Good</span></h3>
        </div>
     </div>
</div>

---

如果不想添加css，只需将图像放入h3中即可

水质：良好

你知道css是什么吗？检查我的答案

.my-header > img,
.my-header > h3{
  display: inline-block
}