How can I center the bullets in a custom unordered list?

I'm on a mission to craft a custom bullet list using ul li tags.

So far, here's what I have:

ul {
    list-style: none;
    list-style-type: none;  
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(img/bullet.png);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 10px; 
}

This generates the following output:

o            some text
o         some other text
o    and again some other text

The heading is centered, but I want the bullets to align center as well (right next to the beginning of the text). Text-align didn't provide the desired result.

Any suggestions on how to achieve this?

htmlcsshtml-lists

Answer №1

You can utilize the :before pseudo-element to display the bullet using a white bullet unicode character (\25e6), as shown below:

ul li:before {        
  content:'\25e6';
  margin-right:5px;    
  vertical-align:middle;
  font-size:1.5em;
  line-height:0;
}

Check out the demonstration.

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

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

csstwitter-bootstrap

automatically adjusting the font size

There are 3 paragraphs of text on a page...I am looking to dynamically change the font size of these paragraphs every 3 seconds....is that feasible? Specifically, I want paragraph 1 to be initially displayed at 10px and paragraph 2 at 8px. Then, aft ...

c#javascriptasp.netcssvb.net

Extracting a text value from a div using jQuery instead of displaying it in an alert modal

Can someone help me figure out a simple way to display text in a div that indicates what has changed compared to an alert modal with the following code? I'm struggling to understand it. Thanks... $(function(){ var abc = $('selec ...

jqueryjquery-uihtmlmodal-dialog

An alternative solution for forms within forms

I'm in need of nested forms, but since they are not allowed in HTML, I've come up with a solution. I decided to have several submit buttons within one form. Now, my problem is figuring out how to determine which of the submit buttons is pressed ...

htmlformsviewcodeigniter-2

How come applying a unique class to a bootstrap element is unsuccessful in Chrome but operates seamlessly in Edge?

I have customized some elements created using Bootstrap 4 by adding a unique class called ukzcol to change the background color. It works perfectly fine in the navigation section. Here is the ukzcol class: .ukzcol { background-color: rgb(0, 23, 51) !imp ...

htmlcssbrowserbootstrap-4

I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why. <!DOCTYPE html> {% load stati ...

htmlcss

`Evaluating and contrasting information within a jQuery iteration`

Recently, I encountered an issue with a dynamically built table on my page that contains editable data fields. Here is an example snippet of the table structure: <tr> <td class="identifier">1</td> <td class="c1&q ...

htmljquery

Black textures with images sourced from the same domain - Cross-origin

Despite trying numerous solutions and tips to resolve the cross-origin issue, I still can't seem to fix it. There are no errors, the images are hosted on the same domain as the webgl test, but the textures appear black. Occasionally when I refresh rep ...

javascripthtmlthree.js

I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?

Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element. <Box style={{ marginTop: "3rem", marginLeft: "1rem", display: "f ...

cssreactjsmaterial-uispacingbox

Guide on capturing JSON objects when the server and client are both running on the same system

I created an HTML page with a form that triggers JavaScript when submitted using the following event handler: onClick = operation(this.form) The JavaScript code is: function operation(x) { //url:"C:\Users\jhamb\Desktop\assignmen ...

javascriptjqueryhtmlajaxjson

CSS 4.0 Validation Error: The property name "-webkit-text-decoration" is unrecognized in this context

After completing the Udemy course The Complete ASP.NET MVC 5 Course, I encountered an issue with Bootstrap. Despite having the latest versions of Bootstrap, jQuery, and popper.js installed, the functionality simply did not work as expected on my project. I ...

cssasp.net-mvcbootstrap-4

Modifying the onclick function of an HTML select element - easy steps!

I have customized the click event on my select tag to trigger a specific action. However, when I click on the select tag, the default option list is also displayed. I want to bypass this default behavior and only execute my custom action when the select ta ...

javascriptjqueryhtmlhtml-select

Attempting to trigger the onchange function established by jQuery

Within my code, I have a change listener set on the checkboxes in this section: $(".section").change(function() { if($(this).is(":checked")) { $("." + this.id).show(); ... Now, I am attempting to simulate a click event on the ch ...

javascriptjqueryhtmldom-events

Guide on utilizing `ReactCSSTransitionGroup` for developing an expandable/collapsible list

Utilizing ReactJS to implement a collapsible/expandable list with animation has been my latest endeavor. To access the code, simply visit this link. Upon clicking the Extend button located at the top of the list, I anticipate the items to appear within 1 s ...

javascripthtmlcssreactjs

Ways to trigger the display of an image upon hovering over a button without using inheritance

<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...

css

Javascript has trouble processing data coming from an HTML input field

I am struggling to make my JavaScript code work with the input from my HTML input tag. The purpose of this program is for the user to input a number, and then the program will determine whether the number is positive, negative, or zero. Below is the code ...

javascripthtml

Having trouble creating a full-screen modal with NgbModal by passing content as a component?

I've been using Bootstrap widgets and trying to create a full-screen modal where the header sticks on top, the footer stays at the bottom, and the body scrolls in the middle. Initially, I found a simple HTML solution for this: However, when I want to ...

cssangularbootstrap-4bootstrap-modalng-bootstrap

Adjusting ArrowHelper Width in Three.jsLooking to change the size of an Arrow

I have been attempting to adjust the width of pink lines on this jsfiddle link: animation of object In my code, I am defining local basis vectors as follows: // Defining local vector axis of plane var thetadir = new THREE.Vector3(1, 0, 0); var phidir = ...

javascriptcssthree.js

Implementing Bootstrap 4 Beta's server-side validation post error resolution

I'm currently working with Bootstrap 4.0.0.beta and am facing an issue with server-side validation. When adding the .is-invalid class to inputs that were invalid upon submission, even after the user corrects the error, the class remains, potentially c ...

csstwitter-bootstrapvalidationtwitter-bootstrap-4

Opera's compatibility with jQuery's Append method allows developers to

I recently wrote a jQuery script that interacts with a JSON feed and dynamically creates HTML code which is then added to a designated div on my WordPress site. Surprisingly, the functionality works flawlessly in all browsers except for Opera - where not ...

javascriptjqueryhtmljson