Centering a list

Hi all.

I have a module that rotate images.

It loads the images in a ul, and li tags.

I want to make them centered like :

First Image

Second Image​

\

Third Image​

and so on...

How to do it ? I tried to find a tutorial and I can't find any solution...

Any idea?

Thanks,
Guy

 

not sure what you're really looking for.. but this will center your list without bullets.. than just add your images to the <li>tags

<ul style="list-style-type: none; text-align: center;">

 

That only centers the text. If you want to center the list itself, you need to assign a width to the UL element and then set its margins to 0 auto.

Here's an example:

#sample-list {
	list-style: none;
	margin: 0 auto;
	width: 12em;
}

<ul id="sample-list">
	<li>First List Item</li>
	<li>Second List Item</li>
	<li>Third List Item</li>
</ul>

Code (markup):

Of course, if you also want the contents of the list item to be centered as well, you can add text-align: center; to the UL as well as Jamie18 suggested.

Just make sure that the CSS is in an external file rather than inlined so you don't have to go through each HTML or template file to make any changes later on.

 

I'm just wondering why your using a list?

Is it ment to be a list of images? Or is it for layout reasons? If it's the latter then there are better ways to do it than using a list.

 

From what I've read, I'd say it's a list of images.