Hero Image 文本覆盖在浏览器调整大小时四处移动
Hero Image text overlay moves around on browser resize
我在主图上放置了几个 header 标签。当我调整浏览器大小时,text-overlay 上下移动。关于如何将文本固定在英雄图片中间有什么想法吗?
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;
}
将heroText
classcss调整为
.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;
}
.heroText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Hope this helps you:
根据您的查询,我已经对其进行了测试并尝试编写代码,以便对您有所帮助。
我所做的是:
To your "small-12 small-centered columns" DIV; i have
given it a property as position:relative;
The another one "heroText" i have given its property as width:
100%;margin-top: 28%; ; so that this will fix up your text and can be viewed in any type of browser and devices.
我在我的桌面上试过了,它运行良好。
<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>
我建议你为此使用显示 table 结构。
我认为你不需要这么复杂的结构,但保持原样:
.heroimage .row {
display: table;
height: 100%;
}
.heroimage .row .columns {
display: table-cell;
vertical-align: middle;
}
我会删除 de <br>
并清理 .heroText 边距
解决方法如下:
#heroimage{
position:relative;
}
.heroText{
position: absolute;
top: 50%;
width: 100%;
}
我在主图上放置了几个 header 标签。当我调整浏览器大小时,text-overlay 上下移动。关于如何将文本固定在英雄图片中间有什么想法吗?
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;
}
将heroText
classcss调整为
.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;
}
.heroText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Hope this helps you:
根据您的查询,我已经对其进行了测试并尝试编写代码,以便对您有所帮助。
我所做的是:
To your "small-12 small-centered columns" DIV; i have given it a property as position:relative;
The another one "heroText" i have given its property as width: 100%;margin-top: 28%; ; so that this will fix up your text and can be viewed in any type of browser and devices.
我在我的桌面上试过了,它运行良好。
<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>
我建议你为此使用显示 table 结构。
我认为你不需要这么复杂的结构,但保持原样:
.heroimage .row {
display: table;
height: 100%;
}
.heroimage .row .columns {
display: table-cell;
vertical-align: middle;
}
我会删除 de <br>
并清理 .heroText 边距
解决方法如下:
#heroimage{
position:relative;
}
.heroText{
position: absolute;
top: 50%;
width: 100%;
}