如何在li css中分离图像和文本

Question

Is there a way to format my text in one right place (separated from the image, whole heading)?

This is my 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>

Right now, it looks like this:

But, I need this:

Answer 1

Just use a <span> tag to wrap your HTML. It's inline level element so no impact to HTML structure. Additionally you can provide CSS to span tag

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

Answer 2

There are many ways to do this like using a float, using display: table, using flex-box. I have used the flex-box in my answer. Also your content was not in a tag. So I have used p tag for that. Hope this helps.

 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

try this...

 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

If you are using Bootstrap, then try Flex utility, this is nice and easy! :)

Well supports horizontal and vertical alignment also. 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>