在横幅上居中 H1 标题

Question

我已经创建了一个页面，但我真的卡在了某件事上。我在图像横幅上放置了一个 H1 标题，但我的 H1 没有完全居中，我真的不明白为什么...

如果您查看我的屏幕截图，您会发现它看起来居中但并不完美：https://i.stack.imgur.com/cK9Af.png

你能帮我找出原因吗？

谢谢 :)

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>

Answer 1

解决方案 1.

将 transform: translateX(-50%); 添加到您的 h1，它将按预期居中

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

原因是因为你声明left: 50%到你的h1，所以the left ledge of your h1 was centered，不是你的h1的中心，所以你需要翻译你的 h1 向左移动 h1 宽度的 50% 以使 h1 的中心居中，而不是 h1 的左侧居中。

解决方案 2.

如果您想让代码更简洁，不要使用 transform 居中文本，而是使用内置的 text-align: center .

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

变成

.banner{
    text-align:center;
}

Answer 2

应该是这样的

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

Answer 3

您的问题出在 left: 50% 如果您使用该方法，则需要将 -50% 转换为完美居中。

这个h1默认是一个block，建议大家不要用绝对位置，直接用text-align:center和margin-top在top和h1之间加上space

Answer 4

您可以使用 flex 轻松地做到这一点。它允许我们根据自己的意愿完美对齐元素的内容

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

这将创建完美的垂直和水平居中对齐；

Answer 5

改变

.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%;
}

至

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

Answer 6

.banner h1
{
  width: 100%;
  text-align: center;
  bottom: 25%;
  position: absolute;
  color: white;
  font-weight: bold;
}

或

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

试试这样的东西..

Answer 7

.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%;
}

Answer 8

很简单，您有两种方法可以实现此设计。

.banner h1{transform: translate(-50%, -50%);margin: 0;}
.banner{display: flex;align-items: center;justify-content: space-around;}

希望对您有所帮助。 :)

如果您有进一步的说明，请告诉我。

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>

在横幅上居中 H1 标题

Center H1 title on a banner

html

css

center

banner

centering

解决方案 1.

解决方案 2.