CODEWITHSUNDEEP
htmlcss
feedobesebison
feedobesebison

Reputation: 53

Center the text and bullet of an <li> element

I'm brushing up on my CSS skills by going through these challenges, and I'm having trouble with the very first one (see image below). strong text

CSS Challenge 1

I can center the text, but the bullets aren't getting centered with it. See JSFiddle

li {
  text-align:center;
}
<ul>
  <li>List Number 1</li>
  <li>List Number 2</li>
  <li>List Number 3</li>
  <li>List Number 4</li>
  <li>List Number 5</li>
</ul>

Upvotes: 3

Views: 81

Answers (3)

Stickers
Stickers

Reputation: 78676

The easiest way might be setting list style position to inside.

li {
  list-style-position: inside;
  text-align: center;
}
<ul>
  <li>List Number 1</li>
  <li>List  2</li>
  <li>List Number 3</li>
  <li>List 4</li>
  <li>List Number 5</li>
</ul>

Upvotes: 1

FrontDev
FrontDev

Reputation: 847

Use :before pseudo-element. As content in it you can put images, HTML caracters, etc... Updated your fiddle

https://jsfiddle.net/shbfsoq6/2/

Upvotes: 1

user5713256
user5713256

Reputation:

Add this code in your css its work.

li {
  text-align:center;
  list-style-type:none;
}
li:before{
  content:'\2022';
    margin-right:5px;    
}

Here is Demo : http://jsfiddle.net/gyQ2W/1/

Upvotes: 1

Related Questions