我正试图完成我的摄影作品集网站，结果被卡住了。对不起，如果我不能具体，因为我是一个新手在编码。我希望图像缩略图始终在中间。当水平浏览器窗口的大小变小时，4列将换行为3列，这很好，但缩略图不在中心，它们更多地位于左侧
另一件事是内胎2。我有一个固定的宽度1220px在2行没有包装。如果浏览器窗口的大小小于此值，我想强制使用水平滚动条。否则，内管2将从右侧消失。我尝试过溢出：auto，但我不喜欢内管2下面的滚动条，我更喜欢在浏览器底部。对于最小列数为3的缩略图来说，1220px的最小宽度也可以。提前非常感谢
<style type="text/css">
a.thumbnail {
display: block;
float: left;
width: 280px;
height: 187px;
margin: 40px 20px 20px;
padding-bottom: 15px;
text-decoration: none;
color: Black;
}
a.thumbnail:hover {
color: #d89a5f;
}
a.thumbnail img {
opacity: 0.6;
}
a.thumbnail:hover img {
opacity: 1;
}
a.thumbnail span {
font-family: 'CustomFont';
display: block;
font-size: h1;
text-align: center;
padding-top: 2px;
color: #d5d5d5;
opacity: 0.2;
}
a.thumbnail:hover span {
opacity: 1;
}
img {
border: 0px solid #CCC;
}
pre {
display: block;
font: Century Gothic, sans-serif;
padding: 10px;
border: 0px solid #bae2f0;
background: #ef1d45;
margin: .5em 0;
overflow: auto;
width: 800px;
}
#container {
width: 75%;
position: relative;
float: none;
clear: both;
bottom: 150px;
margin-top: 150px;
margin-left: auto;
margin-right: auto;
}
body {
text align: center;
margin: 0;
padding: 0;
border: 0;
background-color: #161614;
}
#bgdiv {
position: bottom;
width: 100%;
height: 100%;
Height of frame div
}
#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;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #282828;
margin-bottom: 70px;
border-width: 0px;
border-color: #FFF;
opacity: 0.9;
border-style: solid none none none;
}
#maincontent {
position: fixed;
bottom: 0;
bottom: 100px;
overflow: auto;
background: #fff;
}
.innertube2 {
margin: 0px;
width: 1220px;
margin: auto auto;
}
.innertube {
margin: 5px;
width: 800px;
white-space: nowrap;
padding-left: 250px;
}
* html body {
padding: 0 0 130px 0;
}
* html #maincontent {
height: 100%;
width: 100%;
}
#underlinemenu {
margin: 0;
padding: 0;
white-space: nowrap;
}
#underlinemenu2 ul {
margin: 0;
margin-bottom: 0;
padding-left: 0;
float: left;
font-weight: normal;
width: 100%;
border: 0px solid #DFDFDF;
border-width: 0px 0;
}
#underlinemenu ul {
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: normal;
font-size: 18px;
width: 100%;
border: 0px solid #DFDFDF;
border-width: 0px 0;
}
* html #underlinemenu ul {
margin-bottom: 0;
}
* html #underlinemenu2 ul {
margin-bottom: 0;
}
#underlinemenu2 ul li {
display: inline;
}
#underlinemenu ul li {
display: inline;
}
#underlinemenu ul li a {
float: left;
color: #d5d5d5;
font-weight: normal;
padding: 2px 20px 4px 6px;
text-decoration: none;
background-color: #282828;
}
#underlinemenu2 ul li a {
float: left;
color: #ea9b3c;
padding: 0px 20px 0px 0px;
text-decoration: none;
background-color: #282828
}
.list {
background: (logo.jpg) right no-repeat;
padding-right: 5px;
}
.center {
margin: auto;
width: 50%;
color: #161614;
}
</style>
</head>
<body>
<div>
<div id="container">
<div class="yoxview">
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
<a class="thumbnail" href="01_big.jpg">
<img src="http://placehold.it/280x187" title="ttttttttttttttttttttttttttttttttttttttttttttttttt" alt="ttttttttttttttttttttttttttttttttt" /><span>ttttttttttttttttttttttttttttttttttttttttttttt</span>
</a>
</div>
</div>
<div id="footer">
<div class="innertube2">
<div id="underlinemenu2">
<ul>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
<li><a href="t.html" title="test">test</a>
</li>
</ul>
</div>
<div id="framecontent">
<div class="innertube">
<div id="underlinemenu">
<ul>
<li><a href="t.html" title="test">aaaaaaaaaa</a>
</li>
<li><a href="t.html" title="test">bbbbbbbbbb</a>
</li>
<li><a href="t.html" title="test">cccccccccc</a>
</li>
<li><a href="t.html" title="test">dddddddddd</a>
</li>
<li><a href="t.html" title="test">eeeeeeeeee</a>
</li>
<li><a href="t.html" title="test">ffffffffff</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>`
您可以尝试在图像的样式上插入以下代码：
position: relative;
left: 50%;
transform: translateX(-50%);
这将使图像始终位于<body>的中间。
对于第一个问题，即中间的图像，请按如下方式更正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;
}
对于您的第二个问题，即底部的滚动条，按如下方式更正您的css：
.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;
}