Центральная галерея по горизонтали с CSS

Question

У меня есть простая галерея квадратных миниатюр, все они имеют одинаковые размеры. Каждая миниатюра также является ссылкой. Я хочу, чтобы вся эта галерея была выровнена по горизонтали, но «margin: 0 auto;» не работает. Спасибо за любую помощь!

http://jsfiddle.net/ds2uockq/

HTML: 
<div id="gallery"> 
    <a href="http://www.google.com"><img src="http://placekitten.com/g/150/150" /></a> 
    ... 
<div> 

CSS: 
#gallery { 
    margin: 0 auto; 
} 

Answer 1

Использование text-align: center;

#gallery { 
    margin: 0 auto; 
    text-align: center; 
} 

working demo

Почему я использую текст выравнивать?

Потому что #gallery содержит встроенный элемент, то есть <a>. И чтобы центрировать встроенный элемент, мы используем text-align.

Answer 2

Вот simple method

#gallery { 
    display: block; 
    width: 100%; 
    text-align: center; 
} 

Answer 3

Просто дайте ширину к телу и контейнера.

CSS:

body{ 
    width:100%; 
} 
gallery{ 
    width:70%; 
    margin:0 auto; 
}