Styling a <ul> - centered li text, but bullet is left justified?

HTML & CSS
1

I’m having a little problem with an unordered list.
I want the text to be centered, but when I do that the bullet point graphic stays left justified to the whole ul. I can’t figure out how to keep the text left justified, and have the bulletpoint appear directly next to the beginning of each li text.


<div>
<ul>
<li>monetary donations</li>
<li>donate supplies</li>
<li>donate time/skills</li>
</ul>
</div>



div {
text-align:center;
}
ul {
padding:0;
margin:0;
}
ul li {
background:url(../images/mod-bullet-green.png) no-repeat 0 4px;
padding-left:8px;
list-style:none;
margin-bottom:6px;
}

I apologise if it’s something simple I’m just missing, but I just can’t seem to figure it out!
Thank you!

2

Try adding these to your ul css rules:


        display: inline-block;
        text-align:left;
3

WHOA! that totally worked for the first one! but the two below (i’m applying the same styling to 3 modules), the list element is left justified. ?

4

if it will help to show you the site (it’s a Joomla site) - http://www.redkettledesign.com/jtesting/

the left modules. the top one is correct. the only difference is in the bottom two - they have a word wrap going on. could this be the problem? and any idea how to fix it? thank you!!

5

Alright, for your li rules, try text-align: center;

They are all going to line up at the edges because of the word wrap that’s happening - that’s pushing the bullets to the edge of the box, and there’s not really anything that can be done about that. Max with is max width.

6

Scratch that. I just made it kinda work using :before.

Here’s my CSS:


		div {
		text-align:center;
		}
		ul {
		padding:0;
		margin:0;
		display: inline-block;
		text-align:left;
		width: 90px;
		}
		ul li {
		padding-left:8px;
		list-style:none;
		margin-bottom:6px;
		text-align: center;
		text-indent: -12px;
		}
		li:before{
			padding-right: 4px;
			content: url("../images/mod-bullet-green.png");
		}