在一个背景图像

试图垂直&定心文本水平居中的背景图像内的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>

来源

2017-04-27 brandkast

附上一些图片，以显示您期望得到什么，以及您有什么实际结果！所以我和其他人可以帮助更好。 – Zich

有一个链接到该网站顶部的评论@Zich –

你知道吗？ hgroup看起来以我为中心。 –

-1

如果你可以使用Flexbox的，那么这会让你的生活变得更轻松。更多的在这里 - >https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

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

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

来源

2017-04-27 00:54:39

看起来你想出了一个flexbox解决方案来集中hgroup，但这里有另一种使用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>

来源

2017-04-27 01:08:53

如果我看来，你是居中标志锚标签内，而不是正确的标题标记。尝试使用与img相同的代码，但使用标签。 hgroup看起来很好。希望有所帮助。

来源

2017-04-27 02:06:52

我认为你需要使用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。

使用position属性

<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>

来源

2017-04-27 03:30:49 Ace

你hgroup为中心，并期待找到，问题是没有中心的背景图像。

你只需要居中背景图像。

来源

2017-04-27 10:22:38 Zich

在一个背景图像

回答

相关问题