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

Removing the rows that do not contain a table - nested div elements within other div elements

PHP: Locate a class within an HTML element using a regular expression

Animating distance with the power of animate.css

The transparent DIV/waiting message may not be displayed in IE10

The problem of border-radius bleeding in Webkit when applying -webkit-transform

Improving Page Load Speed with HTML Caching: Strategies for Enhancing Performance when over half of the data transferred is for navigation menus

Iframe navigation tracking technology

Add fresh inline designs to a React high-order component creation

"Here's how you can mark an option as selected in Angular, either from the component or the HTML file

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

The width of the child box does not properly receive the 100% application

Having trouble updating the value in the toolbar?

How can we use JavaScript to add a class to the <html> element?

Items in the Vue.Draggable display can be arranged on both the left and right

Adding a new row to an HTML table using JavaScript

The presence of the target tag remains unchanged when a media query is used

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

Utilize a function within styled-components

What is the best way to switch the visibility of a div on click from another div?