The list-style-image is not aligned in the center (vertically)

Having a bit of trouble with aligning my list-style-image vertically within the ul li script.

Tried using vertical-align but it's not doing the trick.

Any solutions?

Check out the code on this jsFiddle link

ul {
    margin-top: 10px;
    padding-left: 50px;
    color: #3C4355;
    margin-bottom: 6px;
}

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    list-style-image: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif');
}




<ul>
    <li>Text 1</li>
    <li>Text 2</li>
</ul>
htmlcsshtml-listsvertical-alignment

Answer №1

For example, you can check out this JSFiddle link

li {
   list-style: none;
}

li:before {
   content: url(...);
   display: inline-block;
   vertical-align: middle;
   margin-right: .5em;
}

If your items spread across multiple lines, try this other JSFiddle demo: http://jsfiddle.net/nDX6g/4/

Take a look at the screenshot below:

Answer №2

To adjust the background position properly, you can utilize a background image:

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    background: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif') 0 0 no-repeat;
    padding-left: 20px;
    list-style-type: none;
}

Check out the Demo: http://jsfiddle.net/dfsq/nDX6g/2/

Answer №3

Take a look at this interactive demo on jsFiddle

Cascading Style Sheets (CSS)

ul {
    margin-top: 10px;
    padding-left: 50px;
    color: #3C4355;
    margin-bottom: 6px;
}

li {
    margin-left: 20px;
    color: #3C4355;
    line-height: 20px;
    padding: 0px 0px 0px 25px;
    list-style: none;
    background: url('http://forum.bizportal.co.il/NewSite/emoticons/smiley9.gif') no-repeat left top;
}

Outcome

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

Issue with escaping dialog in Bootstrap using the ESC key

My dialog is not responding to the escape key, any ideas on what could be causing this issue? <div *ngIf="visible" class="overlay"> <div role="dialog" class="overlay-content" tabindex="-1"> <div class="modal-dialog" [ngClass]= ...

htmlcsstwitter-bootstrapangular

Is it possible to integrate a MySQL database with an HTML form?

My goal is to allow users to input a name that exists in the database. Upon selecting "Go", I want to display all results from the contact table that match the user's input. However, when I run the HTML code, the PHP script executes but returns "0 res ...

phphtmlmysql

What is the best way to display sanitized text on a webpage?

I have implemented express-validator in my project to sanitize and escape user input before saving it to my MongoDB database. However, when I try to store a URL in the database after sanitizing it, it gets stored as: https:&#x2F;&#x2F;www.youtube. ...

htmlnode.jsexpressexpress-validator

How can I retrieve the value of a specific <span> element by referencing the class of another <span> within

I have come across the following HTML: <div class="calculator-section"> <p> <span class="x"></span> <span class="amount">30</span> </p> <p> <span class="y"></span ...

javascriptjqueryhtmlcss

How can we minimize the data contained in JSON HTML markup?

https://i.stack.imgur.com/mzuB0.png Currently, I am attempting to find a way to conceal the last 12 digits in the price shown on a button, as it is excessively long. The method I am utilizing involves a JSON api and insertAdjacentHTML markup. This snipp ...

javascripthtmljsonmarkup

Is there any difference between keeping JavaScript at the bottom of the page versus including it in the <head> tag inside document.ready?

Would it make a difference if I place my JavaScript code at the bottom of the page versus inside <head> within document.ready? I'm torn between these two approaches, referenced here: http://api.jquery.com/ready/ and http://developer.yahoo.com/p ...

javascriptjquerycssperformancexhtml

Is there a way to showcase English and CJK text vertically with CSS?

This particular issue was first discussed 14 years ago on Stack Overflow, but a definitive solution still remains elusive. My goal is to have both CJK and Latin characters displayed vertically, with their bottoms facing the right side. While writing-mode ...

htmlcsscross-browserlocalecjk

Converting a table-based layout to Bootstrap using the "row" and "col-*-*" classes

My current project is built on a table-layout structure, but now the requirements have changed and we need to make it responsive. To achieve this, we have decided to use Bootstrap. How can I convert the existing tables into a Bootstrap grid layout without ...

csstwitter-bootstraphtml-table

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

javascriptcssreactjscss-transitionsreact-table

"Showcasing products on top of a background picture

I'm trying to achieve a specific layout on my codepen page, where the <div class="item__boxes"> element is displayed at the bottom of the <div class="item">. However, I've run into some issues and need help with the implementation. Q ...

htmlcssimageflexbox

Can you provide instructions on how to adjust the width of a form using a JavaScript script within a CSS file?

I am currently working on creating a form where individuals can input their email addresses to receive some information. My goal is to design one HTML file that will work seamlessly on both desktop and mobile views by adjusting the form width based on th ...

javascripthtmlcss

Is it possible to relocate my navigation bar?

I am struggling to align my top horizontal navbar to the right next to the header that reads "Best TV Ever". I have already floated it to the right, but now I need it to move up to the top of the page. Can anyone help me with this? Here is the link to th ...

htmlcss

Exploring the functionality of AngularJS routing on a webpage

Testing the routing functionality of AngularJS while creating a web page. The index.html will contain links to Home, Courses, and Students. Clicking on each link will load its respective HTML using AngularJS routing. The student information is stored in ...

javascriptphphtmlmysqlangularjs

Showcase a variety of random images in the navigation bar using Javascript and HTML

In order to create a unique experience for mobile users, I have implemented multiple images for my navigation bar menu icon toggle button. These images are stored in an array and a random image is selected each time the page loads using Math.Random. Howeve ...

javascripthtml

Is there a way to dynamically adjust the background box size to fit the inner boxes using node.js?

click here for the screenshot of the webpage I'm working on Hey there! I'm currently working on a school project for my assignment. I'm having some trouble adjusting the size of the background grey box to fit with the content inside, such a ...

htmlcssbootstrap-4

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected... What could be causing this issue? CSS Code: #page_bar { width: 100%; height: 30px; background-color: white } .page_bar { width: 800px; height: 30px; ...

htmlcssvertical-alignmentalignment

Switching the display of a Bootstrap navigation dropdown

After building a Bootstrap menu with a lightbox effect that overlays the page content when expanded, I encountered some issues. I attempted to use JavaScript functions to hide and display the lightbox_container element when toggling the nav. However, addi ...

javascriptjqueryhtmlcssbootstrap-4

Designing a user-friendly search form using HTML

As a beginner in coding, I am attempting to set up a search form using basic HTML on a webpage. Unfortunately, I am facing difficulties in processing the results properly due to my limited understanding of certain terms. Here is my desired outcome: http: ...

htmlurl

Guide on positioning a div to float from bottom left to top right using CSS as the window screen size is reduced

I am wondering if it is possible to float the div using CSS in the following manner. My goal is to have CSS DIV 2 move under CSS DIV 1 to the right when the window size is reduced. Please refer to the screenshot below: On larger window sizes, three DIVs a ...

csshtml

What is the best way to resize an HTML element to fill the remaining height?

I'm struggling with adjusting the height of a node-webkit app to fit the current window size. See below for an image depicting what I am aiming for. Intended Goal : HTML Markup : <body> <div class="header"> THIS IS A HEADER W ...

htmlcsslayoutnode-webkit