テキストを配置することができません

-1

テキストを中央揃えにして、top：20％を使用して配置しました。それはうまくいきましたが、その下に段落を追加すると、要素はちょうど始めの位置に戻っていました（上の20％は有効になりませんでした）。テキストを配置することができません

<style> 
    .yes{ 
      width : 100%; 
      height : 50%; 
      background-color: red; 
      text-align: center; 
     } 
     .yes a{ 
      font-size : 300%; 
      position: relative; 
      top : 20%; 
     } 
    </style> 

    <div class = "yes"> 
    <a>Title</a> 
    <p></p></div>

更新：jsfiddleにいくつかの理由で、divのは50％の高さとして表示されませんので、それは私があまりにも参照しています問題を参照してくださいすることは困難です。ここにコードを表示するリンクがあります。効果を見るには、単にpタグを削除してください：http://liveweave.com/owjs3W#&togetherjs=xwdArBqd5t

出典

2017-01-28 Ash

フィドルを行います。私はあなたのコードでそれを繰り返すことができませんでした。 –

'' top：20％ 'は' .yes a'の 'display：block;'を設定すると有効になると思います – Banzay

@ shukshin.ivan私がフィドルを作ると、divは50％画面。それは効力を発揮しません。 – Ash

繰り返し確認する方法は？次のスニペットは、最後のChromeでうまく機能します。段落が追加された後、タイトルは移動しません。

UPD。関連する状況は背の高いラッパーで繰り返すことができます。だから解決策は、adisplay〜blockにするだけです。

.wrp{height:400px;} 
 
    .yes{ 
 
      width : 100%; 
 
      height : 50%; 
 
      background-color: red; 
 
      text-align: center; 
 
     } 
 
     .yes a{ 
 
      display:block; 
 
      font-size : 300%; 
 
      position: relative; 
 
      top : 20%; 
 
     }

<div class="wrp"> 
 
    <div class="yes"> 
 
     <a>Title</a> 
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="wrp"> 
 
    <div class="yes"> 
 
     <a>Title</a> 
 
     <p></p> 
 
    </div> 
 
</div>

出典

2017-01-28 23:13:06

ありがとう！これはそれをしたようだ。どのようなディスプレイを説明するか心配してください：ブロックは何ですか？私はこれにかなり新しいです。 – Ash

それは良い質問です*なぜ 'inline'要素がdiv内に単独であるとき' inline'要素が 'block'要素として振る舞うのですか？それを知る価値がある。 –

-1

idタグではなくclassタグ内にスタイルをカプセル化する必要があります。

<html> 
<head> 
    <style> 
     .yes{ 
      width : 100%; 
      height : 50%; 
      background-color: red; 
      text-align: center; 
     } 
     .yes a{ 
      font-size : 300%; 
      position: relative; 
      top : 20%; 
     } 
    </style> 
</head> 
<body> 
    <div class="yes"> 
     <a>Title</a> 
     <p></p> 
    </div> 
</body> 
</html>

see it in action

違いは以下の通りです： IDはユニークである必要があり、唯一のドキュメント上の一つの要素に設定すること。クラスはDomの複数の要素に設定できます。

出典

2017-01-28 23:05:57 takethefake

* "IDタグではありません" * - "ID"タグとは？コードに '＃'や 'id =" x "'はありません。 –

あなたはidに関するすべてを削除する必要があります。 –

今私は気づいた、それはあまりにも長い一日だった：D – takethefake

テキストを配置することができません

答えて

関連する問題