Placing text to the right of an image inside an <li> tag

Question

Placing text to the right of an image inside an <li> tag

Struggling with a simple alignment issue in my code and just don't have the time to figure it out. I have two lists, each containing images and text, but I need the text to align to the right of the images instead of wrapping underneath. Here is an example image of the problem.

<section id="providerBenefits">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h1 class="display-3">Benefits<br />for providers</h1>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListLeft">
          <li><img src="./assets/img/CCM-Page_12.png" />Lower costs and higher revenue</li>
          <li><img src="./assets/img/CCM-Page_16.png" />Valued-based chronic care management with full system setup</li>
          <li><img src="./assets/img/CCM-Page_23.png" />Coordination of total care plan of<br />20-minute clinical staff time</li>
        </ul>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListRight">
          <li><img src="./assets/img/CCM-Page_09.png" />80-85% comprehensive care plan<br />established, implemented, and monitored</li>
          <li><img src="./assets/img/CCM-Page_18.png" />Electronic Health Record system<br />compatibility</li>
          <li><img src="./assets/img/CCM-Page_21.png" />24/7 access to statistical reports</li>
        </ul>
      </div>
    </div>
  </div>
</section>

html css twitter-bootstrap

Answer 1

Answer №1

Instead of using the ul li element, consider trying this method:

<div class="container">
<div class="row">
    <div class="col-md-6">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NQ==…";>
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading";>Media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Inl ...................................NlcmlmLCBtb25vc3BhY2U7Z ....// code continues here // ........

Answer 2

Instead of using the ul li element, consider trying this method:

<div class="container">
<div class="row">
    <div class="col-md-6">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NQ==…";>
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading";>Media heading</h4>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Inl ...................................NlcmlmLCBtb25vc3BhY2U7Z ....// code continues here // ........

Answer 3

Answer №2

wrap img in a span and then wrap this span and text in a div with display:flex;

example: li would look like

 <li>
    <div>
        <span><img src="https://placehold.it/100x20" /></span>
        Lower costs and higher revenue
    </div>
 </li>

ul {
  list-style: none;
}

ul li div {
  display: flex;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="providerBenefits">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h1 class="display-3">Befefits<br />for providers</h1>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListLeft">
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Lower costs and higher revenue
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Valued-based chronic care management with full system setup
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Coordination of total care plan of<br />20-minute clinical staff time
          </div></li>
        </ul>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListRight">
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>80-85% comprehensive care plan<br />established, implemented, and monitored
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Electronic Health Record system<br />compatibility
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>24/7 acces to statistical reports
          </div></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 4

wrap img in a span and then wrap this span and text in a div with display:flex;

example: li would look like

 <li>
    <div>
        <span><img src="https://placehold.it/100x20" /></span>
        Lower costs and higher revenue
    </div>
 </li>

ul {
  list-style: none;
}

ul li div {
  display: flex;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="providerBenefits">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h1 class="display-3">Befefits<br />for providers</h1>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListLeft">
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Lower costs and higher revenue
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Valued-based chronic care management with full system setup
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Coordination of total care plan of<br />20-minute clinical staff time
          </div></li>
        </ul>
      </div>
      <div class="col-sm-4">
        <ul id="benefitListRight">
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>80-85% comprehensive care plan<br />established, implemented, and monitored
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>Electronic Health Record system<br />compatibility
          </div></li>
          <li><div>
          <span><img src="http://placehold.it/100x20" /></span>24/7 acces to statistical reports
          </div></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 5

Answer №3

Take a look at the answer provided in this example

'https://jsfiddle.net/anmolsandal/91t0sevb/'

You can achieve it using flex box. Here is the code snippet and demo

<section id="providerBenefits">
  <div class="container">
    <ul id="benefitListRight">
      <li><img src="https://dummyimage.com/100/ffffff/000000" /><span>80-85% comprehensive care plan<br />established, implemented, and monitored</span></li>
      <li><img src="https://dummyimage.com/100/ffffff/000000" /><span>80-85% comprehensive care plan<br />established, implemented, and monitored</span></li>
    </ul>
  </div>  
</section>

Css

ul
{
 padding: 0;
 margin: 0;
 list-style: none;
}
ul li {
 display: flex;
 flex-direction:row;
 justify-content: flex-start;
 align-items: center;
 margin-bottom: 20px;
}
ul li img {
 margin-right: 10px;
}

Answer 6

Take a look at the answer provided in this example

'https://jsfiddle.net/anmolsandal/91t0sevb/'

You can achieve it using flex box. Here is the code snippet and demo

<section id="providerBenefits">
  <div class="container">
    <ul id="benefitListRight">
      <li><img src="https://dummyimage.com/100/ffffff/000000" /><span>80-85% comprehensive care plan<br />established, implemented, and monitored</span></li>
      <li><img src="https://dummyimage.com/100/ffffff/000000" /><span>80-85% comprehensive care plan<br />established, implemented, and monitored</span></li>
    </ul>
  </div>  
</section>

Css

ul
{
 padding: 0;
 margin: 0;
 list-style: none;
}
ul li {
 display: flex;
 flex-direction:row;
 justify-content: flex-start;
 align-items: center;
 margin-bottom: 20px;
}
ul li img {
 margin-right: 10px;
}

Placing text to the right of an image inside an <li> tag

Answer №1

Answer №2

Answer №3

Similar questions

When an HTML string contains <br/>, the line break is not displayed

Add the variable's value to the input field

Is it possible to automatically adjust the text color based on the dynamic background color?

JavaScript drop-down menu malfunctioning

Achieving dynamic HTML element addition through JavaScript while maintaining their record in PHP

Styling the Padding of MUI Select Component in ReactJS

What is the best method for displaying the toggle button for Drawer/Sidebar above the main content and appbar?

Safari doesn't seem to recognize z-index property

Aligning divs, prevent duplicate HTML within multiple divs

I am trying to center align this image, but for some reason, it's not cooperating

The IDs and classes of HTML elements

what is the process for creating a dynamic display slide in bxslider?

How about a fading effect for the select box?

Creating a CSS auto center for elements, with a unique twist

HTML template without the use of server-side scripting languages like PHP or Ruby on

What are the Functions of Ctrl-K on Stack Overflow?

jQuery seems to have difficulty selecting the text of a hyperlink's element using the text() or html() methods

Adding space between the cells on the far left and far right of the table and the border

Ways to handle errors when using navigator.clipboard.writeText

Setting the position of the center to be relative inside a table cell