在一个背景图像
Here's a link to the page.在一个背景图像
试图垂直&定心文本水平居中的背景图像内的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>
如果你可以使用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?
看起来你想出了一个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>
如果我看来,你是居中标志锚标签内,而不是正确的标题标记。尝试使用与img相同的代码,但使用标签。 hgroup看起来很好。希望有所帮助。
我认为你需要使用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>
你hgroup
为中心,并期待找到,问题是没有中心的背景图像。
你只需要居中背景图像。
附上一些图片,以显示您期望得到什么,以及您有什么实际结果!所以我和其他人可以帮助更好。 – Zich
有一个链接到该网站顶部的评论@Zich –
你知道吗? hgroup看起来以我为中心。 –