圖片標記和標題內容不在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

如果您不想添加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> 

Answer 2

這里是：

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：

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