我正在使用 javascript 和 css 构建照片库查看器,但我无法将元素居中。我有一张后退箭头照片、照片本身和下一个箭头。这 3 张照片彼此相邻,我需要将这三张照片都居中。任何帮助表示赞赏,而且,我对 css/javascript/html 有点陌生,所以不要对我这么苛刻。谢谢你,盖伊 Z。
(你可以去 guyzyl.org,进入任何画廊,然后点击一张照片来看看我的意思,以及我想要集中的内容)
这种风格应该有助于:
#viewer {
text-align: center;
white-space: nowrap;
}
此外,使用 DOCTYPE。
你需要给
<div id="viewer"></div>
固定宽度并将其左右边距设置为自动。
CSS 看起来像这样:
#viewer{
width:500px;
margin-left:auto;
margin-right:auto;
}
为防止箭头环绕,您需要调整照片的大小以适合查看器的宽度减去箭头的宽度以及它们上的任何填充、边距或边框。
刚刚看了你的网站。尝试将下面的 CSS 添加到查看器 div 的样式中
margin: auto;
那“应该”将 div 在屏幕上居中。假设浏览器窗口中有足够的空间。