英雄图像文本覆盖在浏览器调整大小时移动答案

【问题标题】：Hero Image text overlay moves around on browser resize英雄图像文本覆盖在浏览器调整大小时移动
【发布时间】：2016-01-12 09:16:18
【问题描述】：

我在我的英雄图片上放置了几个标题标签。当我调整浏览器的大小时，文本叠加层会上下移动。关于如何使文本固定在英雄图像中间的任何想法？

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

【问题讨论】：

标签： html css zurb-foundation zurb-foundation-6

【解决方案1】：

.heroText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

【讨论】：

谢谢 Germano... 成功了。我真的很感谢你的帮助！ - 阿道夫

【解决方案2】：

将heroText类css调整为

.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;

}

【讨论】：

感谢您的帮助。

【解决方案3】：

希望对您有所帮助：

根据您的查询，我已经对其进行了测试并尝试编写代码，以便对您有所帮助。

我所做的是：

到您的“small-12 small-centered columns”DIV；我有给它一个属性为 position:relative;

另一个“heroText”我将其属性设为 width： 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>

【讨论】：

非常感谢您的帮助。

【解决方案4】：

我建议您为此使用显示表结构。

我认为你不需要这么复杂的结构，但保持原样：

.heroimage .row {
    display: table;
    height: 100%;
}

.heroimage .row .columns {
    display: table-cell;
    vertical-align: middle;
}

我会删除 de <br> 并清理 .heroText 边距

【讨论】：

感谢您的帮助。

【解决方案5】：

这里是解决方案：

#heroimage{
 position:relative;
 }
.heroText{
 position: absolute;
 top: 50%;
 width: 100%;
 }

【讨论】：