Ways to split images and text in list items using CSS

Can the text be formatted in a specific location on the page, separate from the image and heading?

This is the HTML code I am currently using:

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

Currently, the layout appears like this:
https://i.sstatic.net/mnFNl.png



However, I would like it to appear as shown here:
https://i.sstatic.net/cznVU.png

javascriptjqueryhtmlcss

Answer №1

give this a shot...

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 №2

To enclose your HTML code, consider utilizing the <span> tag. This element is inline and will not disrupt the layout of your HTML. You can also apply CSS styles to the span tag.

For example, you can add a CSS rule 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 №3

There are various methods to achieve this, such as using floats, display: table, or flex-box. In this case, I opted for using flex-box in my solution and enclosed your content within a p tag for structure. Hopefully, this clarifies things.

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 №4

For those utilizing Bootstrap, consider using the Flex utility as it offers a simple and efficient solution! :)

This utility also provides support for both horizontal and vertical alignment. Check out more here

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to incorporate External JS and CSS files into Angular 5 (loading files with a delay)

I have encountered some challenges while attempting to import external JS and CSS files into my Angular 5 application. Below is the code snippet that I have tried so far: Component.ts : ngOnInit() { this.loadScript(); // also attempted with ...

javascriptcssangulartypescriptangular5

Changing the mouse cursor dynamically with Angular programming

What is the recommended approach for changing the mouse cursor programmatically in Angular? For instance: HTML: <div [style.cursor]="cursorStyle">Content goes here</div> or <div [ngStyle]="{ 'cursor': cursorStyle ...

javascriptangulartypescriptcursorng-style

How come the picture extends beyond the borders of its parent container when I expand the width?

Despite my efforts, I haven't been able to figure this out successfully. My goal is to align the text elements next to the image just like in the example picture below. Initially, I achieved this using absolute positioning. absolute positioning Howe ...

htmlcssflexboxpositioning

Leveraging HTML and PHP for integrating date and mobile number functionalities

I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...

javascriptphphtmlmysql

Expandable Grid with UI-GRID - Automatically expand a row when clicked on

I prefer not to utilize the default + icon for expanding the row. The row should expand when clicked anywhere on it. I attempted the following: HTML <div ui-grid="gridOptions" ui-grid-expandable class="grid"> Controller var app = angular.module( ...

javascriptangularjsangular-ui-grid

The Trouble with Vue.js 2 and Axios Scopes

I previously encountered this "problem" but can't recall the correct approach to achieve the desired results. My current setup involves using Vue 2 to load data into variables that are then displayed on the HTML side: window.Vue = require('vue&a ...

javascriptjqueryvue.jsvuejs2

Exploring the Structure of Trees using JavaScript

Here are my terms: var terms = [ { id: 1, name: "Name 1", parent: null }, { id: 2, name: "Name 2", parent: 6 }, { id: 3, name: "Name 3", parent: null }, { id: 4, name: "Name 4", parent: 2}, { id: 5, name: "Name 5", ...

javascriptnode.js

Is there a more efficient method for dynamically showcasing iframes embedded with assorted jQuery functionalities?

While this method is functional, I am unsure of the underlying logic and suspect there may be a more efficient way to achieve the same result. The webpage contains an iframe with a dynamic src attribute that changes based on user input. I want to ensure th ...

jqueryiframedynamicbind

Unfortunate Outcome: CSS Request Results in 404 Error

Recently, I made a transition from having a single-page website to using an express server for my website. During this process, I had to modify the file paths. However, I am encountering difficulties in loading my css and js files. Upon inspecting the dev ...

htmlcssexpress

Issue with uploading files in headless mode using Webdriverio V9

After upgrading from v8 to v9, I encountered an issue with file uploads in headless mode. The code worked fine in non-headless mode, but failed in headless mode. I would appreciate any assistance with this. capabilities: [ { maxInst ...

javascriptselenium-webdriverfile-uploadwebdriver-io

Parameters in Typescript decorators

Can someone help me understand the various parameters of a Typescript decorator? function myDecorator(target) { // do something with 'target' ... } In the given example, I am aware that 'target' represents the function/class to wh ...

javascripttypescript

Can VueJS lifecycle hooks be outsourced?

Is it possible to organize lifecycle hooks (like created / mounted) in a separate file for better simplicity and cleanliness? MyGreatView.vue import created from 'created.js' export default { created, // created() { console.log('vue Cre ...

javascriptvue.js

The package.json file engines field specifying the version with a tilde and then a greater than sign (~>)

When a package.json file includes an engines field such as this: "engines" : { "node" : "~>12" }, What is the significance of ~> in this context? ...

javascriptnode.jsnpm

What is the best way to verify that a JSON key contains only distinct values within a JSON document using JavaScript?

I'm working with a JSON file structure that looks something like this: "fields": { "asset": { "values": [{ "asset": { "id": "Info_text", "type": "text", "value": "ABCD" } ...

javascriptjson

Custom Homepage with Integrated Google Web Search and Autocomplete Feature

Is there a way to incorporate the standard Google web search with autocomplete into my own webpage, without using a custom search engine like www.google.com? I have been unable to find any examples or guides on how to accomplish this. All the resources see ...

htmlajax

Avoid repeating media queries in MUI JSS by combining them efficiently

Is there a more efficient way to apply the same set of CSS styles to multiple media query rules without repetition? Currently, the only workaround seems to be: [theme.breakpoints.up('xl')]: { color: 'red', backgroundColor: 'gre ...

cssreactjsmaterial-uijss

Passing Variables to Child Components with Vue Slots

Imagine creating a button component with a variable named myVar: MyButton.vue <template> <div> <slot :name="text"> My Button </slot> </div> </template> <script> export default { name: 'm ...

javascriptvue.js

Unable to locate FFmpeg on the root server for Discord JS v13

After setting up my DiscordJS Bot on a new rootserver, I transferred all the files and launched the bot. Everything seemed to be working fine until I tried to run a command that involved the bot joining a voice channel and playing audio. At this point, an ...

javascriptnode.jsffmpegdiscorddiscord.js

Continuously simulate mousewheel events

I'm trying to make my mousewheel event trigger every time I scroll up, but it's only firing once. Can you assist me with this issue? Please review the code snippet below. $('#foo').bind('mousewheel', function(e){ if(e.o ...

javascriptjqueryjquery-eventsmousewheel

The class .is-invalid transforms into .is-valid when rendered

Currently, I am incorporating bootstrap into my react project. In this case, I have a variable called mobile that needs to undergo validation whenever there is a change in the input field. Below is the code snippet for the component: const EnterMobile = ( ...

javascriptreactjsbootstrap-4