見出しと段落のサイズ変更時に

Question

私は<h1>と<p>の位置付けに深刻な問題があります。私は現在absoluteポジショニングを使用していますが、ブラウザのサイズを変更するとテキストが動いてしまいます。

私はそれをスタイルするために他の方法を試しましたが、すべて失敗しました。ここで

はフィドルです：

billboard { 
 
    width: 100%; 
 
    height: 645px; 
 
    position: relative; 
 
    background-image: url("../images/billboard.png"); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
} 
 

 
.billboard h1 { 
 
    color: #fff; 
 
    font-family: WCManoNegraBta; 
 
    font-size: 100px; 
 
    line-height: 60px; 
 
    letter-spacing: -4px; 
 
    text-transform: capitalize; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 250px; 
 
} 
 

 
.billboard p { 
 
    color: #fff; 
 
    font-family: Aleo, serif; 
 
    font-size: 16px; 
 
    letter-spacing: 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 325px; 
 
    
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <link rel="stylesheet" href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css">  
 

 
    <!-- Custom styles for this template --> 
 
    <link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet"> 
 

 
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> 
 
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
 
    <link rel="stylesheet" href="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"> 
 

 

 
<div class="billboard"> 
 
     <h1>resto</h1> 
 
     <p>Where your taste meets our perfectionism</p> 
 
</div>

Answer 1

あなたがHTMLページ（指定されているトップの位置）上の特定の場所でそれらを配置しますH1およびPのための絶対位置を使用しています。しかし、両方の要素に対して100％の幅を指定し、テキスト・アラインメント・センターを使用しました。これにより、要素をページの全幅に伸ばし、要素内のテキストを中央揃えにします。ブラウザウィンドウのサイズを変更すると、テキストが移動します。

問題を解決するには、幅100％を使用する代わりに、表示ブロックを使用して、要素を「left」と「top」のCSSプロパティを使用して特定の場所に配置します。

.billboard h1 { 
    color: #fff; 
    font-family: WCManoNegraBta; 
    font-size: 100px; 
    line-height: 60px; 
    letter-spacing: -4px; 
    text-transform: capitalize; 
    /*width: 100%;*/ /* No need to specify width to 100% */ 
    text-align: center; 
    position: absolute; 
    top: 250px; 
    left:300px; /* Added left position to set p tag at fixed location */ 
} 

.billboard p { 
    color: #fff; 
    font-family: Aleo, serif; 
    font-size: 16px; 
    letter-spacing: 1px; 
    /*width: 100%;*/ /* No need to specify width to 100% */ 
    white-space: nowrap; /* Nowrap property used so that line does not break/wrap, alternatively we can specify width of element. */ 
    text-align: center; 
    position: absolute; 
    top: 325px; 
    left: 245px; /* Added left position to set p tag at fixed location */ 
}