0

いくつかのヘッダー タグをヒーロー イメージに重ねて配置しました。ブラウザのサイズを変更すると、テキスト オーバーレイが上下に移動します。テキストをヒーロー画像の真ん中に固定する方法についてのアイデアはありますか?

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

4

5 に答える 5

2 
.heroText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
于 2016-01-12T09:37:13.420 に答える
1

heroTextクラスCSSを調整する

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

}

于 2016-01-12T09:36:09.947 に答える
1

これには、表示テーブル構造を使用することをお勧めします。

そんなに複雑な構造は必要ないと思いますが、そのままにしておきます。

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

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

de を削除<br>して .heroText マージンをきれいにします

于 2016-01-12T09:52:12.283 に答える
0

ここに解決策があります：

#heroimage{
 position:relative;
 }
.heroText{
 position: absolute;
 top: 50%;
 width: 100%;
 }
于 2016-01-12T10:32:25.373 に答える