我正在为自己制作一个网站，我遇到填充问题。我正在处理的案例涉及在我所做的事情中展示一个基本的计算器。最终的目标是在文本悬停在图像上时显示文本，但是现在图像上的文本位于顶部，当它需要位于中间时。
非常感谢有关代码或改进方法的任何评论，非常感谢您的帮助。 此外，经过一些研究后，我发现使用display：block，但这对我来说并没有用。
谢谢，伊恩。CODE：
body {
background-color: #EDEEEF;
}
#header {
width: 100%;
}
#container {
position: relative;
}
#text {
z-index: 100;
position: absolute;
font-size: 20px;
left: 50%;
height: 50px;
width: 15%;
top: 30px;
}
#text,
#text1,
#text2,
#text3 {
background-color: #FFF;
border-radius: 2px;
border: 2px;
font-family: 'Open Sans', sans-serif;
background: none;
color: #A4A4A4;
padding: 0;
}
button {
border-radius: 2px;
border: 2px;
background: none;
padding: 0;
}
button:hover {
color: #FFF;
font: #FFF;
border-radius: 5px;
border: 2px;
cursor: pointer;
}
#text:hover,
#text1:hover,
#text2:hover,
#text3:hover {
color: #EEE;
}
#text1 {
z-index: 100;
position: absolute;
font-size: 20px;
top: 30px;
width: 10%;
height: 50px;
left: 65%;
}
#text2 {
z-index: 100;
position: absolute;
font-size: 20px;
left: 75%;
top: 30px;
height: 50px;
width: 15%;
}
#text3 {
z-index: 100;
position: absolute;
font-size: 20px;
left: 90%;
top: 30px;
height: 50px;
width: 10%;
}
#AbM,
#Contact,
#CM {
font-family: 'EB Garamond', serif;
background-color: #FFF;
}
#PW {
background-color: #EDEEEF;
font-family: 'Open Sans', sans-serif;
#abtbackground-color: #EDEEEF;
}
#ABM {
width: 60%;
font-family: 'Open Sans', sans-serif;
}
#CM {
margin-left: 40%;
font-family: 'Open Sans', sans-serif;
}
#te {
border-bottom: 1px solid #000;
font-family: 'Open Sans', sans-serif;
display: inline;
left: 40%;
width: 40%;
}
#AbT,
#AbM,
#PW,
#Contact {
font-family: 'EB Garamond', serif;
color: #2F2F2F;
}
#ABM,
#PWW,
#te {
font-family: 'Open Sans', sans-serif;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
#ttt {
left: 200px;
padding-left: 200px;
}
#abs,
#aa {
display: inline-block;
}
#content {
display: block;
height: auto;
background-color: #EDEEEF;
}
#content > img {
float: center;
width: 15%;
height: auto;
display: block;
margin: 5px 30px;
}
#c1:hover,
#c2:hover {
-webkit-filter: brightness(50%);
opacity: 100%;
}
#BBB:hover ~ #c1 {
-webkit-filter: brightness(50%);
}
#BBB {
position: absolute;
font-size: 20px;
color: transparent;
top: 1375px;
width: 10%;
height: 50px;
left: 36%;
opacity: 0;
}
#B2 {
color: #FFF;
font-size: 20px;
font-family: 'EB Garamond', serif;
}
#onboard {
width: 15%;
float: center;
display: block;
height: 400px;
background: url(http://oi67.tinypic.com/2w50waa.jpg) 50% 0 no-repeat;
background-size: cover;
}
#onboard:hover {
-webkit-filter: brightness(50%);
}
#AN {
display: block;
font-family: 'EB Garamond', serif;
padding-top: 1000px;
}
#cal1 {
display: inline-block;
opacity: 0;
font-family: 'EB Garamond', serif;
padding-top: 100px;
}
#BAW {
font-size: 20px;
padding-top: 100px;
font-family: 'EB Garamond', serif;
}<!DOCTYPE html>
<html>
<HEAD>
<title>Ian Winson</title>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="SHORTCUT ICON" HREF="favicon.png"> -->
<!-- ****** faviconit.com favicons ****** -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-192.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon-160.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/favicon-57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon-60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon-76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon-144.png">
<meta name="msapplication-config" content="/browserconfig.xml">
<!-- ****** faviconit.com favicons ****** -->
</HEAD>
<body>
<header style="overflow:hidden; margin:0">
<div id="container">
<center>
<img src="http://i.imgur.com/p7jCsXM.jpg" width="100%"></img>
</center>
<font color="#2F2F2F" size="5"><button id="text" align="right" onClick="document.getElementById('ABT').scrollIntoView();" > ABOUT THIS WEBSITE</button>
<button id="text1" align="right" onClick="document.getElementById('ABM').scrollIntoView();"> ABOUT ME</button>
<button id="text2" align="right" onClick="document.getElementById('PW').scrollIntoView();">PROGRAMMING WORK</button>
<button id="text3" align="right" onClick="document.getElementById('Contact').scrollIntoView();">CONTACT</button>
</font>
</div>
</header>
<center>
<div id="AbT">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>About This Website</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>This Website was started in Early March 2016, and I intend for it to be my platform to post updates,
recent coding projects, resumes, and more. I am self taught in HTML, so my apologies if there are
any bugs
</p>
<br><br>
</font>
</div>
</div>
</center>
<center>
<div id="AbM" background-colo="pink">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>About Me</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>I'm a sophomore at Jesuit College Preperatory School in Dallas Texas(As of Early 2016).
I have been programming for ~2 years, and mainly know Java. I have made a few apps for android, none of which have been released.
I also have done some work programming for my FTC Robotics team, 9157. I am also a member of FRC team 2848.
</p>
<br><br>
</font>
</div>
</center>
<center>
<div id="PW">
<font color="#2F2F2F" face="Garamond">
<h1>Programming Work</h1>
<div id="PWW">
<font face="Open Sans">
<p>As previously mentioned, I mainly know Java, and this is my first big project in HTML.
I have made Java apps including:<br>
</div>
<div id="content">
<div id="onboard">
<div id="Cal1" <p id="AN">Basic</p><button id="AK"> Learn More</button>
</div>
</div>
<img id = "c2" src="http://oi68.tinypic.com/aax9vo.jpg" alt="" width="20%" />
<div id = "QQQ">
<p id = "Q1" style="padding-top: 150px;">Advanced Calculator</p>
<p id = "Q2"> Learn More</p>
</div>
</div>
</div>
</center>
</font>
<center>
<div id="Contact">
<font color="#2F2F2F" face="Garamond">
<br><br>
<h1>Contact Me</h1>
<div id="ABM">
</font>
<font face="Open Sans">
<p>If you are looking to contact me, please do it through the provided links below.<br>
<b>Questions</b><br>
Email: <a href="iankwinson@gmail.com">iankwinson@gmail.com</a><br>
<b>Social Media:</b><br>
Instagram: <a href="https://www.instagram.com/ianwinz/" >@ianwinz</a><br>
Twitter: <a href="https://twitter.com/ianwinz">@ianwinz</a>
</div>
</p>
<br><br>
</font>
</center>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
答案 0 :(得分：1)
在你的CSS中：
#AK {
padding-top: 150px;
}
您的按钮使用的ID似乎是#AK，并且您当前的CSS代码中没有相应的样式。尝试操纵100px（+/-）以满足您的需求。
答案 1 :(得分：0)
您可以尝试在按钮位置使用absolute位置，这位于您的CSS底部
#onboard{
position: relative; /** Container to make sure position absolute stays in place **/
}
#ak{
position: absolute;
width: 100%;
top: 50%;
left: 0;
}