CSS How to center bullet image horizontally

Please visit www.mwebdev.com/ls.html. Take a look at the menu, and the blue/red stars between the menu items.


How can I center the star images between each of the menu links using CSS?


How can I add CSS to add another start to the right of the last menu link (Contact)?

Thanks in advance!
Who is Participating?

Improve company productivity with a Business Account.Sign Up

wdfdo1986Connect With a Mentor Commented:
This is done using <ul> and <li>
What you could do to align stars center between links, is make the width vary, make a fixed margin. But for me the way it is better.
you can add another li tag to add a menu link inside <ul id="main-menu">

Hope it helps
isaacr25Author Commented:
Can you elaborate a bit on the last suggestion (adding another li tag)... More guidance would be appreciated.
Neil_BradleyConnect With a Mentor Web UX/UI DeveloperCommented:
Rather than add another li tag to the end (to get your last star) you could simply add the star to the ul tag that contains the menu. The star would be positioned to the far right.. So giving you your start at the end..

Aggree with previous post. You can control the position of the stars by adding a fixed margin to one side of your li.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

wdfdo1986Connect With a Mentor Commented:
Search for <ul id="main-menu"> in the html and find the ul element.
you will find list of li tags there
add another
isaacr25Author Commented:
I tried adding a fixed margin to the li's. I had to apply a negative margin to get the horizontal spaces to even out. I'm fine with this.

However, I need to center the entire menu horizontally (it's floating to the left currently.

Also, what tags would I apply to get the last star on the right?
wdfdo1986Connect With a Mentor Commented:
To align the whole thing add align center to the class "main-menu"
Check these
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.