使用CSS水平居中画廊

Question

我有一个简单的方形缩略图库，所有这些都有相同的尺寸。每个缩略图也都是一个链接。我希望整个画廊水平对齐，但是＆＃34; margin：0 auto;＆＃34;不起作用。谢谢你的帮助！

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

为什么我使用text-align？

  

因为#gallery包含内联元素，即<a>。为了使内联元素居中，我们使用text-align。

Answer 2

只需给身体和容器宽度。

CSS：

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

Answer 3

这里是simple method

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