как разделить изображение и текст в li css

Question

Есть ли способ отформатировать мой текст в одном правильном месте (отдельно от изображения, весь заголовок)?

Это мое HTML:

<div class="tab-pane container fade" id="environmental">
  <div class="row">
    <div class="content-info col col-sm-6 no-l-padding">
      <h3 class="red-title">ENVIRONMENTAL</h3>
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <li class="list-item"><img class="heat" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">UV RATED WALLS – HEAT TRANSMISSION REDUCTION

            </li>
            <li class="list-item"><img class="air_window" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png">DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT

            </li>
            <li class="list-item"><img class="low_energy" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png">LOW ENERGY CONSUMING HEAT PUMPS
            </li>

          </div>
          <div class="col-sm-6">
            <li class="list-item"><img class="solar_panel" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png">SOLAR PANELS SPACE

            </li>
            <li class="list-item"><img class="sensor" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png">OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN-ROOM AND THROUGHOUT COMMON AREAS

            </li>
            <li class="list-item"><img class="shower" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png">WATER CONSERVING SHOWERHEADS
            </li>

          </div>
        </div>
      </div>

Прямо сейчас это выглядит так:

Но мне нужно это:

Answer 1

Если вы используете Bootstrap, попробуйте утилиту Flex, это приятно и просто! :)

Также поддерживает горизонтальное и вертикальное выравнивание. https://getbootstrap.com/docs/4.3/utilities/flex/

<ul class="list-unstyled">
  <li class="list-item">
      <div class="d-flex justify-content-start align-items-center">
          <div>
              <img width="48" class="heat" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">
          </div>
          <div class="pl-2 text-uppercase">
              UV Rated Walls - Heat Transmission Reduction
          </div>
      </div>
  </li>
</ul>

Answer 2

Есть много способов сделать это, например, используя float, используя display: table, используя flex-box. Я использовал flex-box в своем ответе. Также ваш контент не был в теге. Так что я использовал для этого тег p. Надеюсь, это поможет.

li{
  list-style:none;
}

.list-item{
display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
            align-items: center;
}

.img-sec{
  width: 10%;
}


.list-item p{
  width: 90%;
}

<div class="tab-pane container fade" id="environmental">
                    <div class="row">
                        <div class="content-info col col-sm-6 no-l-padding">
                            <h3 class="red-title">ENVIRONMENTAL</h3>
                            <div class="container">
  <div class="row">
    <div class="col-sm-6" >
      <li class="list-item"><div class="img-sec"><img class="heat"src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png" ></div>
      <p>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</p>

</li>
  <li class="list-item"><div class="img-sec"><img class="air_window"src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png" ></div>
  <p>DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT </p>

</li>
  

    </div>
  </div>
</div>

Answer 3

попробуйте это ...

li.list-item {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
}

li img {
    margin-right: 21px;
}

<div class="tab-pane container fade" id="environmental">
  <div class="row">
    <div class="content-info col col-sm-6 no-l-padding">
      <h3 class="red-title">ENVIRONMENTAL</h3>
      <div class="container">
        <div class="row">
          <div class="col-sm-6">
            <li class="list-item"><img class="heat" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png">UV RATED WALLS – HEAT TRANSMISSION REDUCTION

            </li>
            <li class="list-item"><img class="air_window" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/air_window.png">DOUBLE GLAZED WINDOWS – COOL AIR CONTAINMENT

            </li>
            <li class="list-item"><img class="low_energy" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/low_energy.png">LOW ENERGY CONSUMING HEAT PUMPS
            </li>

          </div>
          <div class="col-sm-6">
            <li class="list-item"><img class="solar_panel" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/solar_panel.png">SOLAR PANELS SPACE

            </li>
            <li class="list-item"><img class="sensor" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/sensor.png">OCCUPANCY SENSORS TO CONTROL LIGHTING AND AC – BOTH IN-ROOM AND THROUGHOUT COMMON AREAS

            </li>
            <li class="list-item"><img class="shower" src="http://dubai.themyriad.com/wp-content/uploads/2020/02/shower.png">WATER CONSERVING SHOWERHEADS
            </li>

          </div>
        </div>
      </div>

Answer 4

Просто используйте тег <span> для упаковки HTML. Это встроенный элемент уровня, поэтому не влияет на HTML структуру. Дополнительно вы можете указать CSS для тега span

как li span {max-width:100px}

<li class="list-item"><img class="heat"src="http://dubai.themyriad.com/wp-content/uploads/2020/02/heat.png" >
<span>UV RATED WALLS – HEAT TRANSMISSION REDUCTION</span>

</li>