CSS实现文字悬浮在图片中间位置的样式效果

我们在设计网页的时候，是不是有看到文字附着在图片的中间。常规简单的办法就是直接将图片上打上文字，但是这样每次修改就显得麻烦。于是，我们可以尝试用定位的方式将文字部分便宜到图片中间的位置。



最终实现的效果就这样子。

CSS样式部分：

.bannertop .site-center-text{
position:absolute;
z-index:1;
text-align: center;
top:300px;
}

.bannertop .site-center-text>p{
font-size: 24px;
color:#fff;
}
.sitetitle{font-size: 80px;color: #FFF;}
.sitedescription{color: #fff;opacity: .8;margin-top: 100px;}
@media screen and (max-width: 600px) { .wp-none{display:none; }}

我们可以看到，我还用到wp-none的样式可以设定在移动端隐藏。

<div class="bannertop">
<img class="banner-img" src="cropped-shutterstock_1246744045-scaled-1.jpg"> 
<div class="site-center-text">

<h1 class="sitetitle wp-none">MM-Offshore</h1>

<p class="sitedescription wp-none">The company MM-Offshore GmbH is one of the major designing and producing ship’s equipment supplier in the international shipbuilding market.</p>
</div>
</div>

这样HTML的部分。