Question

我正在尝试创建一个网站，但这些图像我没有工作，它们应该在标题下，例如，酒精照片应该在酒精标题下，神经系统照片应该在神经系统标题下。

以下是目前的样子截图：

此处是我的代码：

HTML：http://hastebin.com/utafabumof.xml CSS：http://hastebin.com/arefipaguy.css

如果可以的话，谢谢你的帮助。这意味着很多。

Answer 1

图像应位于同一div内，例如酒精图像应位于

中

<div class="science">
    <div class="alco">Image for Alco goes Here</div>
    <div class="nersys">Image for Nersys goes Here</div>
</div>

Answer 2

试试这个。 html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Science - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/science.css"/>
</head>

<body>
  <header>
    <div class="nav">
      <ul>
        <li class="home"><a href="index.html">Home</a></li>
        <li class="about"><a href="english.html">English</a></li>
        <li class="news"><a href="#">Hosptality & Catering</a></li>
        <li class="contact"><a href="#">Leisure & Tourism</a></li>
        <li class="contact"><a href="#">BTEC Computing</a></li>
        <li class="contact"><a href="#">BTEC Business</a></li>
        <li class="contact"><a href="#">CV</a></li>
      </ul>
    </div>
  </header>

  <div class="science">
    <center><h2>Science:</h2></center>
  </div>

  <div class="center-block">
    <div class="alco">
      <h4>Alcohol:</h4>
       <div class="alcoimage"><a href="file:///N|/Documents/My Documents/Year 11/Computing/Website home version/of mice and men.html"><img src="images/Science/alcohol.jpg" width="400" height="357" alt=""/></a></div>
    </div>
<div class="nersys">
    <h4>Nervous System:</h4>
     <div class="alcoimage"><a href="file:///N|/Documents/My Documents/Year 11/Computing/Website home version/cannabis speech.html"><img src="images/Science/NervousSystem.jpg" width="291" height="291" class="nerimage" /></a></div>
    </div>
  </div>



<div id="wrapper">
    <div id="footer">
      <p><center>Contact Me:</center></p>
      <p><center>11lanjac@abbeyfield.wilts.sch.uk</center></p>
    </div>
  </div>

</body>
</html>

和Css文件：

....
  .science {
      padding-top: 30px;
  }

  .center-block{
      text-align: center;
  }
  .center-block .alco {
      display: inline-block;
      vertical-align: top;
      text-align: center;
      padding-right:150px;
  }
  .center-block .nersys{
        display: inline-block;
        text-align: center;
        padding-left:150px;
  }

  .alcoimage {
      padding-top: 60px;
  }

  #footer {
      background:#40ea3c;
      width:100%;
      height:80px;
    position:absolute;
    bottom:0;
    left:0;
    color: white;
  }

我该如何修复这个CSS？

2 个答案: