Tips for aligning the list style icon perfectly with the text

I need help aligning text in the center of a customer list style image for an LI element.

I've attempted using margins and paddings, but it hasn't worked.

Here's the code and screenshot:

HTML:

<ul class="homeList">
 <li>Over 1 million happy travellers</li>
 <li>Over 450 local pick-up points with return travel for your convenience</li
 <li>Great range of breaks across Britain, Europe &amp; America</li>
 <li>Included excursion programmes</li>
 <li>Superb value assured</li>
</ul>

CSS:

.homeList li {
    list-style-image: url(../images/bulleticon.png);
    line-height: 20px;
    padding: 0;
    margin: 0;
}

This is the current appearance:

https://i.sstatic.net/DvLDx.png

htmlcsslisthtml-lists

Answer №1

You should consider using background-image instead of list-style-img when styling list items.

li {
  list-style: none;
  background: url(../images/bulleticon.png) left center;
  padding-left: 20px;
}

By utilizing background-position, you can easily adjust the position of the image.

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

Adjusting the "lang" attribute to modify the font style

By using the HTML lang attribute and setting it to "en", I noticed that some of the div fonts and colors were changing to the default ones in Bootstrap. Although I am utilizing the Bliss2 Regular font, the default font style seems to be taking precedence. ...

htmlcssfontsbootstrap-4

Whenever I include an onClick event to a div element, the entire webpage fails to display

Currently taking on the task of developing a seat booking website. I am encountering an issue with adding an event listener to a particular div element, which should trigger a function to store the value of the div. However, upon implementing the onClick e ...

javascripthtmlreactjs

What is the best way to display a particular section of a website (<td>...</td>) within a UIWebView?

I have searched high and low for a solution to my issue, but have come up empty-handed. What I am attempting to accomplish is to only load a specific td from a webpage into a UIWebview. Currently, my code looks like this: - (void)viewDidLoad { [supe ...

htmliosuiwebview

Series of responses cascading from one another

Users are experiencing an issue where the need for adjusting margins based on the depth of responses in posts. Currently, this involves setting a margin-left value of 40px for one level deep reactions and 80px for two levels deep, and so on. To address th ...

htmlcsswidthmargincenter

In Python, locate all adjacent nodes to a specified node within a nested list structure

I am currently working on a problem that involves identifying all neighbors of a given node in a list composed of multiple lists. The structure of the array is as follows: 0,2,4,1,6,0,0 2,0,0,0,5,0,0 4,0,0,0,5,5,0 1,0,0,0,1,1,0 6,5,0,1,0,5,5 0,0,5,1,5,0,0 ...

pythonlistgridviewnearest-neighbor

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

javascripthtmlcss

Tips for showcasing personalized validation alerts with jQuery in the HTML5 format?

One of the Javascript functions I designed is for validating file extensions before uploading: function validateFileExtension(field, extensions){ file_extension = field.val().split('.').pop().toLowerCase(); if ($.inArray(file_extension,exten ...

javascriptjqueryhtmlvalidation

Rearrange the middle column to be the top column on smaller screens

I am trying to create a layout with 3 columns in a row. The challenge is to prioritize the middle column on top when viewed on small screens, with the left and right columns below it. To clarify, on large screens the order should be 1 2 3, while on small s ...

csstwitter-bootstrap

Developing a downloadable PDF version of an online platform

For weeks now, I have been tirelessly searching for a solution to a problem that has stumped me once before. The Challenge: My company created a sophisticated web-based data analytics suite for a major beverage distributor. Our client is now requesting a ...

javascripthtmlperlcsspdf

How can I hover over multiple cells in a table?

Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...

javascriptcssreactjsmaterial-ui

How to position preloader at the center in materializeCSS

Given this situation: I attempted to implement this Preloader with position:fixed and centered. My approach was as follows: .loader { position:fixed; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); } <link rel="stylesheet" href="h ...

htmlcssmaterialize

Import an Excel document in Python

Here is the content of my file.csv: 1 2 3 7 I am trying to convert this data into a list like the following: ['str-1', 'str-2', 'str-3', 'str-7'] This is the code I have used for the conversion: import csv data ...

pythonpython-3.xlist

Display a horizontal progression indicator during the page download process

Occasionally, website pages may take a while to download without the user even realizing it. This can be problematic if the user clicks on an image or button with an event handler attached, as it may break the page functionality. To address this issue, I ...

jqueryhtmlcssprogress-bar

What is the reason for the malfunctioning of this button upon clicking?

Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...

javascripthtmlcss

Changing position of element upon appearance of span in React

Currently, I am working with React and facing an issue where a span element appears whenever a user hovers over a text element. The problem is that the existing text shifts leftwards when the span appears (to the right of the text). The desired behavior ...

javascripthtmlcssreactjsmaterial-ui

implementing jquery typewriter plug-in for a responsive bootstrap image

I am using Bootstrap and my image response dynamically, but I am having trouble adding text to it. I would like to use a jQuery typewriter plugin for the text on the image, which should resize according to screen size. Here is my HTML code and I have used ...

jqueryhtmlcsstwitter-bootstrap-3jquery-plugins

Update the logo for mobile, desktop, and tablet display using Bootstrap 4alpha

I am currently working on customizing a header with Bootstrap 4 alpha. <div class="container"> <div class="row"> <div class="col-md-6 text-md-left text-center"> <div class="navbar-brand"><img src="/wp-con ...

csstwitter-bootstrapbootstrap-4

Modifying the border hue of Material-UI's Select Component

Here is the Select component I've created using materials-UI <FormControl variant="outlined"> <Select value={this.state.value} onChange = {this.handleChange} className={this.props.classes.select} inputProps = {{class ...

cssreactjsmaterial-ui

Using Javascript to dynamically flash-highlight text on a webpage when it first loads

I am looking to create a special highlight effect that activates when the page loads on specific text. Let's focus on the element with id="highlight me". The highlight should glow twice around the selected container before fading out. For a clear unde ...

javascripthtmlanimation

What are different ways to adjust the size of a mapped image (i.e., image map) in HTML?

I am facing an issue with an HTML file that contains only image map data and the image. The image has dimensions of 3000 * 3000. When I open the HTML file, the picture is not fully visible due to its size. Currently, the image tag looks like this: <IM ...

htmlimagemap