親要素に対するパーセンテージとして線の高さを設定します。

Question

私は、幅と高さの両方が調整される応答要素を持っています。この中に私は垂直に中心を置くテキストがあります。

親の身長がわからない場合は、テキストのline-heightを親と同じに設定するにはどうすればよいですか？

line-height: 100%あなたが知っている（または設定）そのうち、これは...

Answer 1

要素を垂直方向にセンタリングする別の方法です。私は少し前にthis techniqueに出くわしました。基本的には、擬似要素を使用し、vertical-align：middleを使用します。

.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can 
    also be of any width and height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 

Answer 2

を助けていないので、私は別の要素内のテキストを入れて試してみたサイズ、フォントの通常の高さを基準にしています。それからそれに相対的な位置付け、上、左50％、負の左右のマージンを設定します。

See this Fiddle

唯一の問題は、これは、既知/固定のTextBlockに依存しているということです。テキストが可変であれば、私はJavascriptを使用することに頼らざるを得ないのではないかと心配しています。

Answer 3

ハイパーリンクについて：

私は、メインメニュー内のリンクについて、この問題を抱えていました。そして<a>の<li>タグであったので、クリック可能/タッチ可能なリンクが必要でした（touch target size参照）。 私がしたことは、<ul>の固定幅を設定しました（この場合は親を介して）、<li> -sはそれの割合であり、<a> -sは最小高さとライン高さのプロパティが設定されていますそこからトップを設定するのは簡単です。コード：

.menu-header-main-container{ 
position: fixed; 
top: 0; 
bottom: 160px; 
}  
.menu-header-main-container ul.menu { 
      height: 100%; } 
      .menu-header-main-container ul.menu li { 
      height: 33.33%; 
      max-height: 110px; } 
      .menu-header-main-container ul.menu li a { 
       line-height: 40px; 
       min-height: 40px; 
       top: calc(50% - 20px); 
       position: relative; } }