CODEWITHSUNDEEP
htmlcss
user9317722
user9317722

Reputation:

Can't responsively center div that contains divs inside

I'm trying to center my div #center and to make it responsive to different screen sizes. I have no luck in doing that. Here's the body of my HTML page. 

<body>
    <h1 id="panneau">Panneau de score</h1>
    <div id="center">         
      <div class="temps" id="temps">0:00</div>
      <div class="score" id="score">0</div>
      <div class="scoreDeux" id="scoreDeux">0</div>
      <h2 id="Locaux">Locaux</h2>
      <h2 id="Visiteurs">Visiteurs</h2>
    </div>
    <center><img id="EquiLogo" src="EquinoxeLogo.png" alt="Equinoxe Logo"/></center>
  </body>

Here's #center's CSS:

#center { 
  width: 1100px;
  height: 1100px;       
  margin: 0 auto;
}

Here's the body's CSS:

body {   
 max-height: 300%;
 background: linear-gradient(315deg, #808080, #a6a6a6, #ff8080, #ff4d4d);
 background-size: 3000% 3000%;
 background-position: center;
 background-attachment: fixed;
}

Upvotes: 0

Views: 69

Answers (3)

Pablo E. Lujambio
Pablo E. Lujambio

Reputation: 177

The problem here is that you are giving a fixed px width to your center element, and that your body has no declared width. Add the next to your CSS

body {
  width:  100%; 
}

#center {
  max-width:  1100px; 
  width:  100%; 
  margin:  0 auto; 
  padding:  20px; 
  box-sizing:  border-box;
}

Explanation:

Here you will make your body full width.

Your #center element will adapt to the screen size (the width: 100%;) while capping at your maximum desired width (max-width: 1100px;).

The margin: 0 auto; property will center your #center element horizontally, while your padding: 20px; will provide a safe spacing between your element and the screen borders in screens smaller than 1100px (hence, will look like it is centered).

I would go a little further and even use display: flex; on your #center element to center its content like this: 

body {
  width:  100%; 
}

#center {
  max-width:  1100px; 
  width:  100%; 
  margin:  0 auto; 
  padding:  20px; 
  box-sizing:  border-box;
  display:  flex; 
  flex-direction:  column; 
  align-items:  center; 
  justify-content:  center; 
}

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

I assume that by 'centering' #center, you're talking horizontally centering the text. In this case, you're looking for text-align: center. While your margin: 0 auto is indeed the right approach for block-level elements, you need text-align: center for both text and inline elements.

Note that #center has an enormous fixed width and height of 1100px, and this won't work responsively, as it will be larger than the viewport. You'll want a percentage-based width instead, like 50%.

If you further want to offset your image (like it was when #center had a large #height, you should instead use margin-top. If you want it stuck to the bottom of the page, you should use either position: fixed or the flexbox layout.

Both of these can be seen in the following example:

#center {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

body {
  max-height: 300%;
  background: linear-gradient(315deg, #808080, #a6a6a6, #ff8080, #ff4d4d);
  background-size: 3000% 3000%;
  background-position: center;
  background-attachment: fixed;
}
<body>
  <h1 id="panneau">Panneau de score</h1>
  <div id="center">
    <div class="temps" id="temps">0:00</div>
    <div class="score" id="score">0</div>
    <div class="scoreDeux" id="scoreDeux">0</div>
    <h2 id="Locaux">Locaux</h2>
    <h2 id="Visiteurs">Visiteurs</h2>
  </div>
  <center><img id="EquiLogo" src="http://placehold.it/100" alt="Equinoxe Logo" /></center>
</body>

Upvotes: 1

Julien Ambos
Julien Ambos

Reputation: 2088

Add width: 100% to your body tag.

Upvotes: 0

Related Questions