Javascript 如何在换行时将块元素居中并启用最小宽度的水平滚动？

我正试图完成我的摄影作品集网站，却被卡住了。对不起，如果我不能具体，因为我是一个新手在编码。 我想有图像缩略图始终在中心。当水平浏览器窗口的大小变小时，4列将换行为3列，这很好，但是缩略图不在中心，它们更多地位于左侧。 另一件事是内管2。我有一个固定的宽度1220px在两行没有包装。我想强制水平滚动条，如果浏览器窗口的大小变得比那个小。否则，内管2将从右侧消失。我试过overflow:auto，但我不喜欢在innertube2下面的滚动条，我更喜欢在浏览器底部。 对于最小列数为3的缩略图，最小宽度为1220px也可以。 提前非常感谢`

a、 缩略图{ 显示：块； 浮动：左； 宽度：280px； 高度：187px； 利润率：40px 20px 20px； 垫底：15px； 文字装饰：无； 颜色：黑色； } a、 缩略图：悬停{ 颜色：d89a5f； } a、 缩略图像{ 不透明度：0.6； } a、 缩略图：悬停img{ 不透明度：1； } a、 缩略跨度{ 字体系列：“自定义字体”； 显示：块； 字号：h1； 文本对齐：居中； 垫顶：2件； 颜色：d5d5d5； 不透明度：0.2； } a、 缩略图：悬停范围{ 不透明度：1； } img{ 边框：0px实心CCC； } 前{ 显示：块； 字体：世纪哥特式，无衬线； 填充：10px； 边框：0px实心bae2f0； 背景：ef1d45； 边缘：.5em0； 溢出：自动； 宽度：800px； } 容器{ 宽度：75%； 位置：相对位置； 浮动：无； 明确：两者皆有； 底部：150px； 边缘顶部：150px； 左边距：自动； 右边距：自动； } 身体{ 文本对齐：居中； 保证金：0； 填充：0； 边界：0； 背景色：161614； } bgdiv{ 位置：底部； 宽度：100%； 身高：100%； 帧div的高度 } 框架内容{ 位置：固定； 底部：0； 左：0； 宽度：100%； 高度：70像素； 溢出：隐藏； 背景：282828 urlimg/logo.jpg没有重复； 颜色：白色； 空白：nowrap； } 页脚{ 位置：固定； 底部：0； 宽度：100%； 高度：40px； 背景：282828； 边缘底部：70像素； 边框宽度：0px； 边框颜色：FFF； 不透明度：0.9； 边框样式：实心无； } 主要内容{ 位置：固定； 底部：0； 底部：100px； 溢出：自动； 背景：fff； } .内管2{ 边际：0px； 宽度：1220px； 保证金：自动； } .内管{ 保证金：5px； 宽度：800px； 空白：nowrap； 左侧填充：250px； } *html正文{ 填充：0 130px 0； } *html主要内容{ 身高：100%； 宽度：100%； } 下属{ 保证金：0； 填充：0； 空白：nowrap； } U2 ul{ 保证金：0； 页边距底部：0； 左侧填充：0； 浮动：左； 字体大小：正常； 宽度：100%； 边框：0px实心DFDFDF； 边框宽度：0px 0； } 下线{ 保证金：0； 边缘底部：1米； 左侧填充：0； 浮动：左； 字体大小：正常； 字号：18px； 宽度：100%； 边框：0px实心DFDFDF； 边框宽度：0px 0； } *超文本标记{ 页边距底部：0； } *html下划线U2 ul{ 页边距底部：0； } 女职员2 ul li{ 显示：内联； } 李国荣{ 显示：内联； } 你的下属{ 浮动：左； 颜色：d5d5d5； 字体大小：正常； 填充：2×20px 4×6px； 文字装饰：无； 背景色：282828； } 下属2 ul li a{ 浮动：左； 颜色：ea9b3c； 填充：0px 20px 0px 0px； 文字装饰：无； 背景颜色：282828 } .名单{ 背景：logo.jpg右无重复； 右侧填充：5px； } .中心{ 保证金：自动； 宽度：50%； 颜色：161614； }

---

您可以尝试在图像样式上插入以下代码：

position: relative; 
left: 50%; 
transform: translateX(-50%);

---

这会使图像停留在你的，总是.

对于你的第一个问题，即中心图像校正你的CSS如下：

a.thumbnail {
   display: block;
   float: left;
   width: 280px;
   height: 187px;
   margin: 40px 20px 20px;
   padding-bottom: 15px;
   text-decoration: none;
   color: Black;
   text-align:center;
  }

.innertube2 {
    margin: 0px;
    width: 1220px;
    margin: auto auto;
    float: left;
    overflow: scroll;
    }
#underlinemenu2 {
    float: left;
    width: 100%;
    }
#framecontent {
    /* position: fixed; */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    overflow: hidden;
    background: #282828 url(img/logo.jpg) left no-repeat;
    color: white;
    white-space: nowrap;
    float: left;
    }

对于第二个问题，即底部的滚动条，请按如下方式更正css：

a.thumbnail {
   display: block;
   float: left;
   width: 280px;
   height: 187px;
   margin: 40px 20px 20px;
   padding-bottom: 15px;
   text-decoration: none;
   color: Black;
   text-align:center;
  }

.innertube2 {
    margin: 0px;
    width: 1220px;
    margin: auto auto;
    float: left;
    overflow: scroll;
    }
#underlinemenu2 {
    float: left;
    width: 100%;
    }
#framecontent {
    /* position: fixed; */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    overflow: hidden;
    background: #282828 url(img/logo.jpg) left no-repeat;
    color: white;
    white-space: nowrap;
    float: left;
    }

---

非常感谢。我试过了，但缩略图仍然没有居中，它们更多地停留在左侧。第二个解决方案也不起作用。当浏览器大小小于1220px时，我得到了一个垂直滚动条，但没有水平滚动条。谢谢