无法使用 CSS 将 3 张相邻照片居中答案

【问题标题】：Can't center 3 adjacent photos using CSS无法使用 CSS 将 3 张相邻照片居中
【发布时间】：2012-05-18 14:47:41
【问题描述】：

我正在使用 javascript 和 css 构建照片库查看器，但我无法将元素居中。我有一张后退箭头照片、照片本身和下一个箭头。这 3 张照片彼此相邻，我需要将这三张照片都居中。任何帮助表示赞赏，而且，我对 css/javascript/html 有点陌生，所以不要对我这么苛刻。谢谢，盖伊 Z。

（你可以去 guyzyl.org，进入任何画廊，然后点击一张照片来看看我的意思，以及我想要的中心）

【问题讨论】：

【解决方案1】：

这种风格应该会有所帮助：

#viewer {
   text-align: center;
   white-space: nowrap;
}

另外，使用 DOCTYPE。

【讨论】：

【解决方案2】：

刚刚查看了您的网站。尝试将下面的 CSS 添加到查看器 div 的样式中

margin: auto;

这“应该”使 div 在屏幕上居中。假设浏览器窗口中有足够的空间。

【讨论】：

【解决方案3】：

你需要付出

<div id="viewer"></div>

固定宽度并将其左右边距设置为自动。

CSS 如下所示：

#viewer{
    width:500px;
    margin-left:auto;
    margin-right:auto;
}

为防止箭头环绕，您需要调整照片的大小以适应查看器的宽度减去箭头的宽度及其上的任何填充、边距或边框。

【讨论】：

首先感谢您的快速回答，我有几个后续问题： 1. 我可以设置一个大于实际窗口大小的固定宽度吗？ 2.如何根据查看器的宽度减去箭头和填充的宽度调整照片大小...？再次感谢
@guyzyl 我认为不需要固定宽度。先不试一试。是的，你可以给 div 一个比窗口更宽的宽度，但是你会得到一个在很多情况下不需要的水平滚动条。此外，图片宽度超过 500 像素。
我希望图片尽可能大，所以我暂时不打算将它们变小
是的。现在我看到了李斯特先生的回答。这将是要走的路，因为它只是 div 中的图像（用于更复杂的设置。）