-1

I've created a page but I'm really stuck on something. I put a H1 title over an image banner but my H1 is not perfectly centered and I really don't understand why...

If you look at my screenshot you'll see that it looks centered but not perfectly: https://i.stack.imgur.com/cK9Af.png

Could you help me to figure out why?

Thanks :) 

body{
 margin: 0;
 font-family: Arial;
}

header{
 position: relative;
 background: #262626;
 color: white;
 width: 100%;
 height: 10vh;
}

.logo{
 position: absolute;
 width: 100px;
 left: 100px;
 transform: translateY(-50%);
 top: 50%;
}

.banner{
 position: relative;
 height: 25vh;
 background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

.banner h1{
 position: absolute;
 color: white;
 font-weight: bold;
 top: 50%;
 left: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>Landing Page</title>
</head>
<body>

<header>
 <img src="logo.svg" class="logo" alt="Modis logo">
</header>


<div class="banner">
 <h1>H1 Title</h1>
</div>


<content>
 <div class="left">
 <h2>H2 Title</h2>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus eros libero, lobortis semper neque porta sed. Aenean maximus et nunc at scelerisque. Nullam pulvinar, libero sed malesuada tempor, elit arcu porttitor urna, viverra dignissim elit dolor ut sapien. Suspendisse potenti. Mauris lacinia, neque at euismod tristique, ante tellus cursus nisl, non blandit neque lacus id erat. Vestibulum id varius libero. Aliquam tempor id eros non fringilla. Donec fringilla convallis nisi, vitae pulvinar mi finibus ac.
 <br><br>
 Ut ac euismod mi. Ut neque ex, aliquet non quam vitae, pretium sodales neque. Etiam viverra, sem vitae consequat imperdiet, nibh neque congue arcu, quis bibendum ligula ligula et sem. Pellentesque risus eros, laoreet ultrices augue vel, iaculis condimentum elit. Vivamus scelerisque leo quam, ut interdum lorem imperdiet non. Vivamus suscipit tincidunt faucibus. Proin quis mattis dui, id congue orci. Aliquam ornare at neque sit amet interdum. Nullam ut sapien nulla. Nunc molestie vitae elit ac sodales. Maecenas a laoreet orci. Donec accumsan eleifend congue. Aliquam erat volutpat. Duis tristique arcu eget turpis volutpat rhoncus. Morbi eu eros ac lectus tincidunt hendrerit.
 <br><br></p>

 <img src="wp-preview.png" class="wp-preview" alt="White Paper">
 </div>

 <div class="right">
  <form>
     <fieldset>
       <legend>Personal information:</legend>
       <input type="text" name="lastname" placeholder="Last name">
       <br>
       <input type="text" name="firstname" placeholder="First name">
       <br>
       <input type="text" name="company" placeholder="Company">
       <br>
       <input type="text" name="email" placeholder="Email">
       <br>
       <input type="text" name="title" placeholder="Title">
       <br>
       <input type="text" name="telephone" placeholder="Telephone">
       <br>
       <select name="lastname">
        <option value="Sydney">Sydney</option>
        <option value="Sydney">Sydney</option>
        <option value="Sydney">Sydney</option>
        <option value="Sydney">Sydney</option>
       </select>
       <br>
       <select name="lastname">
         <option selected disabled>Are you</option>
        <option value="Sydney">Looking for new job opportunities</option>
        <option value="Sydney">Looking to hire</option>
        <option value="Sydney">Neither</option>
       </select>
       <br><br>
       <input type="submit" value="Submit">
     </fieldset>
  </form>
 </div>
</content>

</body>
</html>
Édouard Bernard
  • 11
  • 2

8 Answers8

0

Solution 1.

Add transform: translateX(-50%); to your h1 and it'll be centered as expected

.banner h1{
    position: absolute;
    color: white;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translateX(-50%); // add this
}

The reason is because you declared left: 50% to your h1, so the left ledge of your h1 was centered, not the center of your h1 was, so you need to translate your h1 to the left 50% of your h1's width to make the center of h1 be centered, not the left of h1 be centered.

Solution 2.

If you'd like to make the code be cleaner, don't center text by transform, use the built-in text-align: center instead.

.banner{
    position: relative;
}
.banner h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%); // need this to be centered if using position: absolute approach
}

becomes

.banner{
    text-align:center;
}
Loi Nguyen Huynh
  • 8,492
  • 2
  • 29
  • 52
0

It should be like this.

.banner h1{
    position: absolute;
    color: white;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
}
Ravi Kadyan
  • 323
  • 1
  • 9
0

Your problem is in left: 50% if you use that approach will be needed to translate -50% to be perfectly centered.

This h1 is a block by default, I recommend you not to use absolute position and just use text-align:center and margin-top to add space between the top and the h1

Yasiel Cabrera
  • 540
  • 4
  • 11
0

You may easily do this by using flex. It allows us to perfectly align the content of elements as per our wish

.banner{
    position: relative;
    height: 25vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner h1{
    color: white;
    font-weight: bold;
}

This will create perfect vertical and horizontal alignment to center;

Ijhar Ansari
  • 310
  • 1
  • 2
  • 9
0

Change

.banner{
 position: relative;
 height: 25vh;
 background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

.banner h1{
 position: absolute;
 color: white;
 font-weight: bold;
 top: 50%;
 left: 50%;
}

to

.banner{
 position: relative;
 height: 25vh;
 background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover; text-align:center;
}

.banner h1{
 color: white;
 font-weight: bold;
 margin:0;
}
StackSlave
  • 10,613
  • 2
  • 18
  • 35
0
.banner h1
{
  width: 100%;
  text-align: center;
  bottom: 25%;
  position: absolute;
  color: white;
  font-weight: bold;
}

or

.banner h1
{
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  color: white;
  font-weight: bold;
}

try something like this..

Nethra
  • 579
  • 2
  • 8
0
.banner {
    position: relative;
    height: 25vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.banner h1 {
    position: absolute;
    color: white;
    font-weight: bold;
    left: 0;
    right: 0;
    top: 10%;
}
Satinder Preet
  • 11
  • 3
0

It's easy, You have a two way to achieve this design.

  1. .banner h1{transform: translate(-50%, -50%);margin: 0;}

  2. .banner{display: flex;align-items: center;justify-content: space-around;}

Hope it will help you. :)

Let me know if you have further clarification.

body{
 margin: 0;
 font-family: Arial;
}

header{
 position: relative;
 background: #262626;
 color: white;
 width: 100%;
 height: 10vh;
}

.logo{
 position: absolute;
 width: 100px;
 left: 100px;
 transform: translateY(-50%);
 top: 50%;
}

.banner{
 position: relative;
 height: 25vh;
 background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("banner3.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

.banner h1{
 position: absolute;
 color: white;
 font-weight: bold;
 top: 50%;
 left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css">
 <title>Landing Page</title>
</head>
<body>

<header>
 <img src="logo.svg" class="logo" alt="Modis logo">
</header>


<div class="banner">
 <h1>H1 Title</h1>
</div>


<content>
 <div class="left">
 <h2>H2 Title</h2>

 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus eros libero, lobortis semper neque porta sed. Aenean maximus et nunc at scelerisque. Nullam pulvinar, libero sed malesuada tempor, elit arcu porttitor urna, viverra dignissim elit dolor ut sapien. Suspendisse potenti. Mauris lacinia, neque at euismod tristique, ante tellus cursus nisl, non blandit neque lacus id erat. Vestibulum id varius libero. Aliquam tempor id eros non fringilla. Donec fringilla convallis nisi, vitae pulvinar mi finibus ac.
 <br><br>
 Ut ac euismod mi. Ut neque ex, aliquet non quam vitae, pretium sodales neque. Etiam viverra, sem vitae consequat imperdiet, nibh neque congue arcu, quis bibendum ligula ligula et sem. Pellentesque risus eros, laoreet ultrices augue vel, iaculis condimentum elit. Vivamus scelerisque leo quam, ut interdum lorem imperdiet non. Vivamus suscipit tincidunt faucibus. Proin quis mattis dui, id congue orci. Aliquam ornare at neque sit amet interdum. Nullam ut sapien nulla. Nunc molestie vitae elit ac sodales. Maecenas a laoreet orci. Donec accumsan eleifend congue. Aliquam erat volutpat. Duis tristique arcu eget turpis volutpat rhoncus. Morbi eu eros ac lectus tincidunt hendrerit.
 <br><br></p>

 <img src="wp-preview.png" class="wp-preview" alt="White Paper">
 </div>

 <div class="right">
  <form>
     <fieldset>
       <legend>Personal information:</legend>
       <input type="text" name="lastname" placeholder="Last name">
       <br>
       <input type="text" name="firstname" placeholder="First name">
       <br>
       <input type="text" name="company" placeholder="Company">
       <br>
       <input type="text" name="email" placeholder="Email">
       <br>
       <input type="text" name="title" placeholder="Title">
       <br>
       <input type="text" name="telephone" placeholder="Telephone">
       <br>
       <select name="lastname">
        <option value="Sydney">Sydney</option>
        <option value="Sydney">Sydney</option>
        <option value="Sydney">Sydney</option>
        <option value="Sydney">Sydney</option>
       </select>
       <br>
       <select name="lastname">
         <option selected disabled>Are you</option>
        <option value="Sydney">Looking for new job opportunities</option>
        <option value="Sydney">Looking to hire</option>
        <option value="Sydney">Neither</option>
       </select>
       <br><br>
       <input type="submit" value="Submit">
     </fieldset>
  </form>
 </div>
</content>

</body>
</html>
jaydeep patel
  • 867
  • 4
  • 14