我在英雄图像上放置了几个标题标签。调整浏览器大小时,文本覆盖会上下移动。关于如何将文本固定在英雄形象的中间,有什么想法吗?
html:
<!--Hero-->
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<br>
<div class="heroText">
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
css:
// Hero
html, body, #heroimage{
width:100%;
height:100%;
}
.heroText {
text-align: center;
color: white;
margin-top: 50%;
margin-bottom: 50%;
}
#heroimage{
background: url('/../assets/img/codeHero.0.jpg') center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我的网址是:http://adolfobarreto.atwebpages.com
.heroText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
将heroText
class css调整为
.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;
}
希望这能帮助你:
根据您的查询,我已经对它进行了测试,并尝试对它进行编码,这样可能会对您有所帮助。
我所做的是:
到您的"小12小中心列"DIV;我有赋予它一个position的属性:relative
另一个"heroText"我给出了它的属性为宽度:100%;利润率最高:28%;这样可以修复您的文本,并可以在任何类型的浏览器和设备中查看。
我在桌面上试过了,效果很好。
<html>
<head>
<title></title>
<style type="text/css">
.small-centered {
/* Set the position only */
position: relative;
}
.heroText {
text-align: center;
color: white;
/* Added two lines only */
width: 100%;
margin-top: 28%;
}
</style>
</head>
<body>
<div id="heroimage">
<div class="row">
<div class="small-12 small-centered columns">
<!-- Here in above given small-12 smaill-centered columns DIV , provide 1 CSS property that, " position: relative " that will set this div to its place to be aligned in a line. -->
<br>
<div class="heroText">
<!-- Here in above given heroText DIV , provide 2 CSS property that, " width: 100%, marngin-top:28%; " this will fix up this child div and will set your texts written. -->
<h1>Adolfo Barreto</h1>
<h4>Web Designer</h4>
</div>
</div>
</div>
</div>
</body>
</html>
我建议您为此使用显示表结构。
我认为你不需要这么复杂的结构,但保持原样:
.heroimage .row {
display: table;
height: 100%;
}
.heroimage .row .columns {
display: table-cell;
vertical-align: middle;
}
我会删除de <br>
并清除.hoText页边距
以下是解决方案:
#heroimage{
position:relative;
}
.heroText{
position: absolute;
top: 50%;
width: 100%;
}