CODEWITHSUNDEEP
htmlcss
user8473431
user8473431

Reputation: 119

How do I get the header in the middle of the page?

Trying to get the header and images under it right in the middle of the page but am having a lot of trouble figuring out how to do that. Tried manipulating the box model with no luck. I'm really new to this stuff so any advice helps.

enter image description here

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition:all 1s;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 400px;
}
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
  <h1>Choose Your Weapon</h1>
    <div class="container">
      <img src="images/rock.svg" alt="rock">
      <img src="images/paper.svg" alt="paper">
      <img src="images/scissors.svg" alt="scissors">
      <p></p>

    </div>
    <script src="app.js"></script>
  </body>
</html>

Upvotes: 1

Views: 1699

Answers (4)

Contrevien
Contrevien

Reputation: 124

Alright, so this can be done by a dirty little trick i learned when i started. Before i get to that, i would like to make some changes to your code:

A) No need for setting position: relative; for body because all the elements automatically move in relation to the body of your page. Setting the position to relative means that you are confining the position element of everything inside the body as relative. So it will ignore the absolute of the .container class.

B) Second, i don't see a reason why if you want to keep the header and the images together, you do not keep them under a single class. It makes it easier to move them around together rather than shifting one by one.

Now to the trick, for starters, you need to set the min-heightand min-width of the container class in pixels. Once you have done that, you can position the class at the middle by:

top: 50%;
left:50%;
margin-top: -200px; /*half of the height of the container*/
margin-left: -200px; /*half of the width of the container*/

So, now your code, all summed up must something like this:

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition:all 1s;
}

.container {
  position: absolute;
  min-width: 400px;
  min-height: 200px;
  top:50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
}
  <body>
  <div class="container">
    <h1>Choose Your Weapon</h1>
    
      <img src="images/rock.svg" alt="rock">
      <img src="images/paper.svg" alt="paper">
      <img src="images/scissors.svg" alt="scissors">
      <p></p>

    </div>
    <script>
    
    </script>
  </body>

and guess what, it's even responsive :)

Upvotes: 1

frnt
frnt

Reputation: 8795

Issue is positioning and use of property left, top which even hide top text when you reduce screen size, instead you can change it's position to relative and then use margin to align that at center of page,

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition: all 1s;
}

.container {
  position: relative;
  min-height: 400px;
  background: red;
  margin: auto;
  display: inline-block;
}
<h1>Choose Your Weapon</h1>
<div class="container">
  <img src="http://via.placeholder.com/100x100" alt="rock">
  <img src="http://via.placeholder.com/100x100" alt="paper">
  <img src="http://via.placeholder.com/100x100" alt="scissors">
  <p></p>
</div>

Upvotes: 1

Usagi Miyamoto
Usagi Miyamoto

Reputation: 6299

Try something like this:

body {
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition: all 1s;
}

.container {
  width: auto;
  margin: auto;
}
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Choose Your Weapon</h1>
  <div class="container">
    <img src="images/rock.svg" alt="rock">
    <img src="images/paper.svg" alt="paper">
    <img src="images/scissors.svg" alt="scissors">
    <p></p>

  </div>
  <script src="app.js"></script>
</body>

</html>

Upvotes: 1

sol
sol

Reputation: 22949

You could use flexbox for this

body {
  height: 100vh;
  background: radial-gradient(gold, goldenrod);
  font-family: monospace;
  font-size: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

img {
  padding: 10px;
}

img:hover {
  transform: scale(1.4);
  transition: all 1s;
}
<h1>Choose Your Weapon</h1>
<div class="container">
  <img src="images/rock.svg" alt="rock">
  <img src="images/paper.svg" alt="paper">
  <img src="images/scissors.svg" alt="scissors">
  <p></p>

</div>

Upvotes: 1

Related Questions