Блог

Мне нужна помощь. В течение нескольких дней я пытался правильно оформить текст с помощью flex. Кажется, ничего не работает. flex-обертывание:nowrap; и 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;
    }
 

Подайте 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> 

Спасибо всем, кто помогает вашим советам работать.

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

 You can try adding display : flex to image class. 
Checkout code pen solution.
 

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