当文本用 flex 换行到第二行时，无法在图像旁边对齐文本

Question

我需要帮助。几天来一直在尝试使用 flex 正确包装文本。似乎没有任何效果。弹性包装：无包装；和弹性方向：行；文本换行;我想要图像然后包裹文本，这样它就可以与另一行上的文本一样。另外还控制行之间的间距。我什至尝试添加 <div>，但我认为问题在于我的 css 代码无法找出正确的组合来解决我的问题。

 <div class="image"><img src="images/trash.png" width="32" height="32" alt="Landfill" style="display: flex; flex-direction: row;"> 
                        <div class="text">
                            Landfill
                        </div>
    </div>

图像目标属性 图片 饮用水井 图像危险废物 发电机

div class="mb-4">
    <div class="row justify-content-center"> 
        <div class="map-wrapper">
            <div class='map-container'id="map"></div>
            <div class="flex-container">
            <div class="legend">
            <h2> Legend </h2>
                    <div class="image">
                        <img  style="vertical-align:left" src="images/house_icon.png" width="32" height="32" alt="Pin that indicates target property"> 
                        <span style="vertical-align:left">Target Property</span>
                    </div>
            
                    <div class="image">
                        <img src="images/well.png" width="32" height="32" alt="Waterwell"> 
                        <span>Drinking Water Well</span>
                    </div>
                    <div class="image">
                        <img style="vertical-align:left" src="images/hazardous.png" width="32" height="32" alt="Hazardous waste sight"> 
                        <span>Hazardous Waste Generator</span>
                    </div>
            </div>
            </div>
            </div>
        </div>
    </div>
                <button id='center-button'>Center</button>
</div>

<!-- Map End -->

    legend{
    border-radius: 3px;
    overflow-y:auto; 
    padding:10px; 
    position: absolute; 
    bottom:20px;
    right:20px;
    width:220px;
    height:260px;
    max-height:100%;
    z-index:4;
    background: rgba(255, 255, 255, 0.8);
    }
    
    .legend img {
    padding-right: 10px;
    max-width: 100%;
    max-height: 100%;
    }
    
    .legend span {
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 0 0 0%;
    padding-right: 2px;
    }
    
    .legend h2{
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    }

Answer 1

将display:flex 应用到您的image 班级

.image {
  display: flex;
  align-items: center;
  width: 175px;
}

img {
  padding: .5em;
}

<div class="image">
  <img src="https://toppng.com//public/uploads/preview/warning-vectors-and-icons-warning-svg-icon-11553508662kccnngsukp.png" width="32" height="32" alt="Hazardous waste sight">
  <span>Hazardous Waste Generator</span>
</div>

Answer 2

感谢大家帮助您的提示发挥作用。

.image {
  display: flex;
  align-items: right;
  padding-right: 20px;
  margin-bottom: .5em;
 }

    <div class="image">
                        <img style="float: left; padding-right: 6px;" src="images/house_icon.png" width="32" height="32" alt="Pin that indicates target property"> 
                        <span>Target Property</span>
                    </div>

Answer 3

You can try adding display : flex to image class. 
Checkout code pen solution.
https://codepen.io/gauravshankar/pen/KKWvjzj 

You need to make changes whatever is written between the comment - /*  Required Changes*/ 
.image {
  display: flex;
} 

You can also add align-items: center; if you want to align image to the center of text. 

If image is of different size you can provide width to the image. 
final code may be something like this. 
.image {
  display: flex;
align-items: center;
width: 30px;
} 

https://codepen.io/gauravshankar/pen/KKWvjzj