54

幅と高さの両方がスケーリングされるレスポンシブ要素があります。この中に、垂直方向に中央揃えにしたいテキストがあります。

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

line-height: 100%フォントの通常の高さを基準にしているため、これは役に立ちません...

4

5 に答える 5

89

要素を垂直方向に中央揃えする別の方法があります。私は少し前にこのテクニックに出くわしました。基本的には、疑似要素と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;
}
于 2012-10-02T08:00:42.250 に答える
15

すでに2019年なので、flexboxを使用してこれを実現することもできます:)

これを行うには、次のクラスを親要素に追加します。

display: flex;
flex-direction: column;
justify-content: center;

このフィドルを見る

于 2019-03-06T12:04:21.450 に答える
1

サイズがわかっている（または設定されている）別の要素の中にテキストを入れてみます。次に、相対位置を上、左50％、負の左右マージンに設定します。

このフィドルを見る

唯一の問題は、これが既知の/修正されたテキストブロックに依存していることです。テキストが可変の場合は、Javascriptを使用する必要があります。

于 2012-10-02T07:37:08.710 に答える
1

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

メインメニューのリンクに関してこの問題が発生していました。また、<a>タグ内<li>にあるため、リンクをクリック/タッチ可能にするためのサーフェスが必要でした（タッチターゲットサイズを参照）。だから私がしたのは<ul>、固定の高さを設定したことでした（この場合は親を介して）、- <li>sはそのパーセンテージであり、<a>-sにはmin-heightプロパティとline-heightプロパティが設定されています。そこにトップを設定します。コード：

.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; } }
于 2018-01-25T13:18:19.173 に答える
0

CSSだけでは、行の高さを親要素の高さの100％に設定することはできません。むしろ、CSSを使用して要素を垂直方向に中央揃えにすることができます。

.parent {
   height:150px;
   position:relative;
   border:1px solid #FDD;
}
.position-center {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}
<div class="parent">
  <span class="position-center">I am vertically centered element</span>
</div>

于 2020-09-03T07:32:12.720 に答える