CODEWITHSUNDEEP
htmlcss
user7808079
user7808079

Reputation: 37

Trouble positioning multiple images - CSS

I am trying to have the three images centered and at the bottom of the page. I'm stuck with the images to the left instead of the center. I've tried many different ways to get it to work, but none have worked. If anyone could please help me it would be greatly appreciated

.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>

Upvotes: 0

Views: 49

Answers (2)

fatih
fatih

Reputation: 349

Just modify your css of "#imagesMain":

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

Upvotes: 0

Tejasvi Karne
Tejasvi Karne

Reputation: 648

Just add width:100% on #imagesMain. Your images are centered but the #imagesMain itself isn't wide enough to show it. width:100% makes it as wide as the viewport.

.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>

Upvotes: 3

Related Questions