イメージタグとヘッダーの内容がhtmlの同じ行に入っていない

Question

イメージとヘッダーの内容を同じ行に表示したいのですが、異なる行に表示します。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12" 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>

Answer 1

ここにある：

HTML： あなたのCOL-SM-12要素

<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> 

に.MY-ヘッダクラスまたは何かを追加CSS：

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

Answer 2

あなたはCSSを追加したくない場合、あなたは単にH3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12" align="center"> 
 
     <h3 align="center"><img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" /> Water Quality :<span id="headerValue"> Good</span></h3> 
 
    </div> 
 
    </div> 
 
</div>