我试图完成我的摄影作品集网站并陷入困境。很抱歉，如果我不能具体，因为我是编码的新手。 我想让图像缩略图始终位于中心。当水平浏览器窗口大小变小时，4列将换行到3列，但是缩略图不在中心，左侧更多。 另一件事是innertube2。我有2行固定宽度1220px没有包装。如果浏览器窗口大小小于此值，我想强制水平滚动条。此外，innertube2正从右侧消失。我试过overflow：auto，但是我不喜欢innertube2下面的滚动条，我更喜欢在浏览器的底部。 对于最小列数为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>
`
答案 0 :(得分：0)
您可以尝试在图片样式上插入此代码：
position: relative;
left: 50%;
transform: translateX(-50%);
这将使图像始终位于<body>的中间位置。
答案 1 :(得分：0)
对于您的第一个问题，即中心的图像更正您的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;
}