使用 CSS 水平居中画廊

Question

我有一个简单的方形缩略图库，它们都具有相同的尺寸。每个缩略图也是一个链接。我希望整个图库水平对齐，但"边距：0 自动;"不起作用。感谢您的任何帮助！

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;
}

工作演示

为什么使用文本对齐？

因为 #gallery 包含内联元素，即 <a> .为了使内联元素居中，我们使用文本对齐。

Answer 2

只需为主体和容器提供宽度即可。

.CSS：

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

Answer 3

这是一个简单的方法

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