Question

尝试垂直和放大将hgroup水平居中于背景图像内部。也许我正在以错误的方式放置图像。正如你所看到的，我尝试了各种不同的方法。 margin：auto，vertical-align：center等都不起作用。

我也试图将徽标置于页面中间，但仍然与顶部齐平。

非常感谢任何帮助！

header img {
  margin: 0 auto;
  height: 167px;
  width: 177px;
}

.welcome {
  height: 650px;
  background: url(images/twotrees.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.welcome hgroup {
  vertical-align: middle;
}

.welcome h1 {
  color: #fff;
  font-size: 64px;
  vertical-align: middle;
}

.welcome h2 {
  font-family: kepler std;
  font-size: 48px;
  color: #fff;
  font-style: italic;
  font-weight: normal;
  text-align: center;
  text-transform: none;
  vertical-align: middle;
}

<body>
  <header>
    <a href="/index.html"><img src="images/ttc_logo.png" width="177px" height="167px" alt="Two Trees Creative Logo"></a>
    <nav>
      <ul>
        <li><a href="index.html">Home</a> |</li>
        <li><a href="about.html">About</a> |</li>
        <li><a href="portfolio.html">Portfolio</a> |</li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <div class="welcome">
      <hgroup>
        <h1>Designing Your World</h1>
        <h2>One pixel at a time.</h2>
      </hgroup>
    </div>
  </header>

Answer 1

您似乎想出了一个以hgroup为中心的flexbox解决方案，但这是使用absolute定位的另一种方法。它具有比flex更好的浏览器支持。

要将徽标居中，只需将其放入text-align: center

的元素中即可

body {
  margin: 0;
}
header img {
  margin: 0 auto;
  height: 167px;
  width: 177px;
}

.welcome {
  height: 650px;
  background: url(http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  vertical-align: middle;
  position: relative;
}

.welcome, .logo {
  text-align: center;
}

.welcome hgroup {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

.welcome h1 {
  color: #fff;
  font-size: 64px;
}

.welcome h2 {
  font-family: kepler std;
  font-size: 48px;
  color: #fff;
  font-style: italic;
  font-weight: normal;
  text-transform: none;
}

<body>
  <header>
    <div class="logo">
      <a href="/index.html"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" width="177px" height="167px" alt="Two Trees Creative Logo"></a>
    </div>
    <nav>
      <ul>
        <li><a href="index.html">Home</a> |</li>
        <li><a href="about.html">About</a> |</li>
        <li><a href="portfolio.html">Portfolio</a> |</li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    <div class="welcome">
      <hgroup>
        <h1>Designing Your World</h1>
        <h2>One pixel at a time.</h2>
      </hgroup>
    </div>
  </header>

Answer 2

如果我是正确的，您似乎将徽标置于锚标记内，而不是标题标记。尝试使用与img相同的代码，而是使用a标签。 hgroup看起来很好。希望有所帮助。

Answer 3

我认为你需要使用position属性及其值static，relative，fixed或absolute。您还可以使用z-index属性指定元素的堆栈顺序（哪个元素应放在其他元素的前面或后面）。我希望以下示例可以帮助您。有关详细信息，请访问https://www.w3schools.com/css/css_positioning.asp和https://www.w3schools.com/howto/howto_css_image_overlay.asp。

使用位置属性

<body>
    <div class="container">
        <img src="https://images.pexels.com/photos/299231/pexels-photo-299231.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Notes">
        <div class="center">My Wishlist To Learn and Understand</div>
    </div>
</body>

</html>
<style>
.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

img {
    width: 100%;
    height: 5%;
    opacity: 0.6;
}
</style>

使用Z-INDEX

<!DOCTYPE html>
<html>

<body>
    <h1>This is notes will help me a lot</h1>
    <img src="https://images.pexels.com/photos/299231/pexels-photo-299231.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" width="100%" height="100%">
    <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>

</html>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>

Answer 4

您的<?php ini_set('display_errors', 1); $month_options = ""; for ($i = 1; $i <= 12; $i++) { $month_num = str_pad($i, 2, 0, STR_PAD_LEFT); $month_name = date('F', mktime(0, 0, 0, $i + 1, 0, 0)); $selected = ""; $month_options .= $month_name . "<br/>"; } echo $month_options;居中并且看起来找不到，问题是背景图片没有居中。

您只需将背景图像居中。

Answer 5

如果您可以使用flexbox，那么这将使您的生活更轻松。更多相关内容 - ＆gt; https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

如果没有，垂直居中，不用硬编码值可能有点棘手。我通常使用这个CSS技巧帖子（https://css-tricks.com/centering-in-the-unknown/）

中提到的技巧

如果这些都不适合你，我建议你看一下这个问题，因为有很多解决方案可以尝试How do I vertically center text with CSS?

在背景图像上居中文本

5 个答案: