html css – center unordered list

Topic

New Reply

Hi, I’m sure this requires a simple fix. I’d like to keep both lists side by side with the items aligned to the left but in the centre of the site. any help appreciated

Reply | Quote

Replies

Well, this will be done with CSS … and I’m definitely no CSS expert but I can say nobody is going to be able to zero in on what’s wrong without examining your CSS code, which hasn’t been supplied here.

Here’s the html snippet you provided (in black), with a few embellishments I’ve added (in red):

Code:

	
	

		

			
Our products and services
			
			
		
		
		

		
			

				
1234
				
12345
				
111111111111
				
2222222222222222
				
3333333
				
4444444
				
55555555555555555
				
666666666666
				
77777777777777
			
			
		
	
	

		

			
Our data is ustilised for:
			
			
		
		
		

		
			

				
aaaaaaaaa
				
bbbb
				
ccccccccccc
				
dddddddddddddd
				
eeeeeeeeee
				
ffffffffffffff
				
gggggggggggg
				
			
			
		
[COLOR="#FF0000"]
	

[/COLOR]

(Aside: The snippet you posted started with a few closing tags from a previous section and ended before closing two DIV tags, but I imagine those were probably in your original source and just not posted here.)

The key to getting the two columns side by side is the “float” attributes. Those would typically be included in the “left-sec” and “right-sec” definitions in your CSS code, but since we haven’t seen your style sheet we don’t know what’s in there.

Unfortunately, “float” will push the two columns all the way to the left and right margins, not centered like you want. So what you want to do somehow is limit the width of the outer block element (the “container” DIV), and then it can be centered.

In my illustration I resorted to hard-coded the outer DIV as 600 pixels wide, and then the “autos” in the “margin” attribute centers the block. Again, some of that may already be in the “container” spec in your unseen style sheet.

There’s likely a better way to do it without hard-coding the width, but as I mentioned, I’m far from being an expert at this. Maybe this will be enough to help you zero in on where you need to focus your attention so you can troubleshoot the problem yourself, but if not perhaps it might be better to ask this in a web design newsgroup, such as “comp.infosystems.www.authoring.stylesheets”.

Reply | Quote

dg1261, worked perfectly, many thanks

Reply | Quote

Thank you sharing this unordered list program, it was worked perfectly!!!

Reply | Quote

The answer from dg1261 is brilliant but when it comes to things like this I cheat and stand on the shoulders of giants and “borrow” from Bootstrap. I’m not 100% sure but it would help to see what your standard CSS files have and whether or not they already have a grid system to use (most do already if you’re using a framework). However, if you add the Bootstrap CSS then you can wrap your ULs in a row class (your container will already proide some level of centering) and add col-md-6 to each div containing the UL:

[HTML]

Our products and services

• 1234
• 12345
• 111111111111
• 2222222222222222
• 3333333
• 4444444
• 55555555555555555
• 666666666666
• 77777777777777

Our data is ustilised for:

• aaaaaaaaa
• bbbb
• ccccccccccc
• dddddddddddddd
• eeeeeeeeee
• ffffffffffffff
• gggggggggggg

[/HTML]

This is a working JSFiddle with the CSS linked.

Reply | Quote