將行高設置爲相對於父元素的百分比

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

唯一的問題是，這依賴於已知的/固定的文本塊。如果文本是可變的，恐怕你將不得不訴諸使用Javascript ..

Answer 3

關於超鏈接：

我是有關於在主菜單鏈接這個問題。並且因爲它是<a> in <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; } }