CODEWITHSUNDEEP
javascriptjquerycsslistcentering
user1232698
user1232698

Reputation: 15

Centering a List from the Left

I have a un-ordered list with fairly large images in it. Now I wanted to see is there any css code I can use to center that list to where the first picture appears exactly in the middle of the page?

take a look at this picture for what I mean:

https://i.sstatic.net/Nk7cZ.jpg

is there anyway to do this with css? or even javascript?

Upvotes: 0

Views: 51

Answers (1)

user1289347
user1289347

Reputation: 2407

Look here http://jsfiddle.net/ru79c/

I did it by just calculating how much of a margin there was between the difference of body width - image width divided by 2 for the left margin

EDIT you could have this recalculate when the window resizes too, so it always stays centered. http://api.jquery.com/resize/

var leftmargin = ($('body').width() - $('ul li').width()) / 2;
$('ul li:eq(0)').css({'margin-left':leftmargin + 'px'});
​

Upvotes: 1

Related Questions