在一個背景圖像

試圖垂直&定心文本水平居中的背景圖像內的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

在一個背景圖像

回答

相關問題