Question

以下是全屏结果：http://jsfiddle.net/anik786/UYkSf/4/embedded/result/

这是HTML / CSS：http://jsfiddle.net/anik786/UYkSf/4/

这是HTML：

<div class="gallery_container">
<div class="pic">
    <img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
  <img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>
<div class="pic">
    <img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
  <img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>
<div class="pic">
    <img src="http://petapixel.com/assets/uploads/2012/02/sample1_mini.jpg" />
</div>
<div class="pic">
  <img src="http://www.ndaccess.com/Sample/Images/Image1.jpg" />
</div>

CSS：

* {margin: 0; padding: 0;}

body {background: black;font-family: arial;}
.gallery_container{
 /* Insert styles here to make container center on page */
}
.pic {
 height: 300px;
width: 300px;
overflow: hidden;
margin: 20px;
border: 10px solid white;
float: left;
}

.pic img{ 
height: 300px;
width: 300px; 
}

问题是，当窗口大小处于特定宽度时，右侧有太多空间（通过调整浏览器大小来自行尝试全屏结果）。

因此，我试图将容器居中，以便画廊始终位于屏幕中间。我通常使用：

保证金：0自动;

但是我不能使用它，因为我不知道容器的宽度是多少（因为它取决于窗口大小）。

请帮忙！提前谢谢！

Answer 1

有许多方法可以集中元素：

保证金方式：

设置宽度或显示：inline-block;你可以使用：

margin-left: auto;
margin-right: auto;

text-align方式：

您可以将其添加到父级：

text-align: center;

绝对方式：

position: absolute;
left: 50%;
margin-left: width/2;

或

position: absolute;
left: 50%;
transform: translate(0, -50%);

最好的方法是移除.pic上的浮动，而是添加display: inline-block。然后在父级添加text-align: center;

Answer 2

您可以使用display: table将未定义给定宽度的项目居中。然后使用margin: 0 auto;

示例http://jsfiddle.net/LstNS/11/

div {
    margin: 0 auto;
    display: table;
}

Answer 3

您也可以使用max-width

居中

max-width: 80%;
margin: 0 auto;

我认为画廊在响应式网站中无论如何都会有％宽度。

如何在不知道宽度的情况下水平居中div？

3 个答案: