Question

我想让三个图像居中并位于页面底部。我被困在左边的图像而不是中心。我已经尝试了许多不同的方法来使它工作，但没有一个工作。如果有人能帮助我，我将不胜感激

.banner {
  position: absolute;
  width: 100%;
  height: 25%;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  background-color: #595959;
  color: #fff;
  text-align: center;
  line-height: 180px;
  font-family: 'Lato', sans-serif;
  font-size: 25px;
}

body {
  padding: 0;
  margin: 0;
}

#imagesMain {
  position: fixed;
  bottom: 0;
  padding: 0;
  margin: 20px 10px;
  text-align: center;
}

img {
  margin-right: 25px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>A-level Revision Website</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <div class="banner">
    <h1>A-Level Revision Website</h1>
  </div>

  </div>
  <div id="imagesMain">
    <a href="Maths.html">
      <img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
    </a>
    <a href="ComputerScience.html">
      <img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
    </a>
    <a href="Physics.html">
      <img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
    </a>
  </div>

</html>

Answer 1

只需在width:100%上添加#imagesMain即可。您的图像居中，但#imagesMain本身不足以显示它。 width:100%使其与视口一样宽。

.banner{
position: absolute;
width: 100%;
height: 25%;
top: 0;
left: 0;
padding: 0;
margin: 0;
background-color: #595959;
color: #fff;
text-align: center;
line-height: 180px;
font-family: 'Lato', sans-serif;
font-size: 25px;
}
body{
    padding: 0;
    margin: 0;
}
#imagesMain{
    position: fixed;
    bottom: 0;
    padding: 0;
    margin: 20px 10px;
    text-align: center;
    width:100%
}

img{
    margin-right: 25px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A-level Revision Website</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
    <div class="banner">
        <h1>A-Level Revision Website</h1>
    </div>

    </div>
    <div id="imagesMain">
        <a href="Maths.html">
            <img src="images/Maths.jpg" alt="Maths" style="width:450px;height:270px;border:0;">
        </a>
        <a href="ComputerScience.html">  
            <img src="images/Computer_Science.jpg" alt="ComputerScience" style="width:450px;height:270px;border:0;">
        </a>
        <a href="Physics.html">  
            <img src="images/Physics.jpg" alt="Physics" style="width:450px;height:270px;border:0;">
        </a>
    </div>
</html>

Answer 2

只需修改＆＃34;＃imagesMain＆＃34;：

的css

#imagesMain {
    bottom: 0;
    left: 0;
    margin: 20px 10px;
    padding: 0;
    position: fixed;
    right: 0;
    text-align: center;
}

麻烦定位多个图像 - CSS

2 个答案: