Member Avatar for jspence29

In my page I want it so that when you resize the page past the point of the pictures, that the pictures will go into another row, all the way so each picture has it's own row. And then potentially I won't need any media queries. But unfortunaltely I can't find a way to center. I have tried everything I can think of, aside of making hundreds of media queries with different positioning. I can't make it a block because then it won't go into rows, I have tried margin: 0 auto;. I have tried changing the padding, I have even tried using the html align="center". Nothing is working. Here is the website Also I have a minor issue, sorry to croud this with two questions. But when it is in it's mobile state, there is no 10px padding at the bottom, and the singapore title is on the left side rather than floating. Here is my code

    <html>
<head>
<title> Singapore - Home </title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial scale=1.0">

<style>
*  
{
  margin: 0;
  padding: 0;

}
body
{
  background: url('woodbackground.jpg');
  background-size: cover;
  min-height: 100%;
  min-width: 100%;
  position: relative;
  top: 0; bottom: 0; left: 0; right: 0;

}

#container 
{
  width: 90%; 
  margin: 0 auto;

}

h1 
{
  font: bold 65px Helvetica, Arial, Sans-serif;
  text-align: center; 
  color: #eee;
  position: relative;
  top: 60px;
}

h3
{
  font: 25px Helvetica, Arial, Sans-serif; 
  text-align: center; 
  color: #eee;
  position: relative;
  top: 80px;

}

ul#gallery
{
  list-style: none;
  display: inline;
  margin: 0 auto;
  position: relative;
  top: 175px;
  width: 1300px;
}

ul#gallery li a
{
  float: left;
  padding: 10px 10px 25px 10px;
  background-color: #eee;
  border: 1px solid #fff;
  -moz-box-shadow: 0px 2px 15px #333;
  position: relative;
  margin: 10px;
  text-decoration: none;

}

ul#gallery li a:hover
{
  position: relative;
  top: -15px;

}

ul#gallery li a img
{
  height: 150px;
  width: 250px;
  max-width: 100%;

}

ul#gallery li a p
{
  margin-top: 25px;
  text-align: center;
  color: #000;
  font: Helvetica, Arial, Sans-serif;
  text-decoration: none;
  font-size: 20px;

}
@media screen and (max-width: 640px)
  
{

  ul#gallery
{
  left: 2.2%;
  width: 600px;
}
  ul#gallery li a:hover
{
  top: 0px;
}
}


</style>
<body>

<div id="container">

   <h1> Singapore </h1>

     <h3><i> Singapore is the worlds first machine that works </i>- Lee Kuan Yew </h3>

<ul id="gallery">

  <li><a href="#"> <img src="gallery.jpg" alt="gallery" /> <p> Gallery </p> </a></li>


  <li><a href="#"> <img src="facts.jpg" alt="facts" /> <p> Facts </p></a></li>


  <li><a href="#"> <img src="tour.jpg" alt="tour" /> <p> Tour </p></a></li>


  <li><a href="#"> <img src="author.jpg" alt="author" /> <p> Author </p> </a></li>

</ul>
<br/>
</div><!-- Container -->


</body>
<html>

Thanks!

Edited by pritaeas because: Moved.
  • 3 Contributors
  • 3 Replies
  • 121 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

A couple of things are happening at once: floating the tiles takes them out of normal flow (which prevents simple centering and can make the parent collapse so bottom padding disappears), and using hard widths makes wrapping behave unpredictably. The cleanest, modern fixes are to stop relying on floats for layout and either (A) use a centered inline-block technique, or (B) use Flexbox so tiles wrap and stay centered automatically. Also avoid using position: relative; top: ... to "nudge" headings — use normal flow (margins) so the layout responds to wrapping.

Flexbox (recommended)

ul#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px; /* fallback to margin if older browser support needed */
  padding: 0;
}

ul#gallery li { list-style: none; }

ul#gallery a {
  display: block;
  width: 250px; /* or use a percent for fluid sizing */
}

ul#gallery img {
  display: block;
  width: 100%;
  height: auto;
}

Inline-block alternative (wider legacy support)

#gallery { text-align: center; }
#gallery li { display: inline-block; vertical-align: top; margin: 10px; list-style: none; }

Fixing the collapsed container / missing bottom padding

  • Give the parent a new block-formatting context: e.g. ul#gallery { overflow: auto; } or add a clearfix pseudo-element. That ensures the parent encloses floated children so padding shows.

Quick tips

  • Remove floats if you adopt Flexbox or inline-block; floats make centering harder.
  • Make images responsive with width:100%; height:auto.
  • Replace positional offsets (top:60px) with margins so headings stay centered as elements wrap.
  • If you need older-browser fallbacks, prefer the inline-block approach; for modern browsers Flexbox is simpler and more robust.

For background reading on these patterns see the Flexbox guide and the clearfix pattern:

Thanks to and for the earlier troubleshooting — the approaches above give a predictable, responsive layout without hundreds of media queries and will fix the centering and the missing padding issues described by .

Recommended Answers

All 3 Replies

Member Avatar for Member #949455

Instead of width: 1300px; try width:100%

Member Avatar for jspence29

I put text-align: center in the container thanks though!

Member Avatar for JorgeM

Your site seems to be centering the images fine even when you change the window size. Do you need any other help with this thread?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.