オフスクリーンのリンク（ボタン）の位置付け

-2

新しい会社のウェブページをスタイリングしていて、ヘッダーは完璧でした。今私はと交換したが、その下のアクションボタンは画面外に押し出されている。私は、インターネット上での位置づけに関する数百万のチュートリアルがあることを知っていますが、私は真剣に立ち往生しています！オフスクリーンのリンク（ボタン）の位置付け

<body> 
<header> 
    <nav> 
     <div class="row"> 
      <ul class="main-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Quote</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
    <div class="hero-text-box"> 
     <img src="img/test.png" width="500px" height="500px" alt="test"> 
     <a class="btn" href="#">Get a Quick Quote</a> 
    </div> 
</header> 

header { 
background-image: url(img/hero2.jpg); 
background-size: cover; 
background-position: center; 
height: 100vh; 
} 

.hero-text-box { 
position: absolute; 
width: 1140px; 
top: 20%; 
left: 60%; 
}

出典

2016-04-27 Austin Kelly

助けを借りていくつかのコードを投稿してください – mlegg

あなたの質問に言い換えてください。 – Auguste

私はjsfiddleを投稿しようとしましたが、画像に問題がありました。ヘッダーを埋めることのない背景画像があり、ロゴはPNGですが、その周りに黒い背景があります。 –

要素を配置する方法はいくつかあります。ボタンを配置する場所を指定しなかったので、そのボタンを中央に配置したいと思うでしょう。それを行うための簡単な（と下位互換性）の方法は次のとおりです。

.button { 
    position: absolute; 
    left: 50%; 
    width: 50px; 
    margin-left: -25px; 
}

位置決めがトップということを意味し、整列残っているので、我々は負のマージンを使用している理由は次のとおりです。0、左：0は左上にあります要素のしたがって、左にすると、要素を中央に配置する場合、50％以上オフセットします。

ボタン要素には、位置属性を持つ親がないことを確認してください。ボタンの親要素にposition属性がある場合、その親要素に相対的なボタン要素が配置されます。これがあなたに役立つことを願っています。

出典

2016-04-27 20:44:05

これはトリックを行うと思います。

.hero-text-box { 
    position: absolute; 
    width: 100%; 
    height:100% 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index:1; 
    top: 0; 
    left:0; 
}

出典

2016-04-28 06:43:43

オフスクリーンのリンク（ボタン）の位置付け

答えて

関連する問題