の内側を垂直方向に整列させるには?-CSSチュートリアル-php.cn

の内側を垂直方向に整列させるには?

Linda Hamilton

リリース： 2024-10-28 02:22:01

オリジナル

632 人が閲覧しました

How to Vertically Align a Inside a ?

の位置合わせ

内で垂直に

<div 
  id="theMainDiv"
  style="
    border:solid 1px gray;
    cursor:text;
    width:400px;
    padding:0px;"
>
  <span 
    id="tag1_outer" 
    style="
      background:#e2e6f0;
      padding-right:4px;
      padding-left:4px;
      border:solid 1px #9daccc;
      font:normal 11px arial;
      color:#3c3c3c"
  >as</span>
</div>

ログイン後にコピー

次の状況を考えてみましょう。があるとします。次のコードに見られるように、

内にネストされています。

デフォルトでは、

の左下隅に位置合わせされます。を中央に配置するには

内で;
オプション 1: 行の高さの操作

#theMainDiv { height: 20px; /* Set the div height for reference */ } #tag1_outer { line-height: 20px; }
ログイン後にコピー

子の行の高さを設定します。

オプション 2: 絶対位置

#theMainDiv { position: relative; /* Apply relative positioning to the div */ } #tag1_outer { position: absolute; top: 50%; margin-top: -10px; /* Half the height of the child span */ }
ログイン後にコピー

に絶対位置を適用します。容器。次に、子を配置します。絶対に top:50% に配置し、margin-top:-YYYpx を使用します。YYY は、子の既知の高さの半分を表します。
詳細とその他のテクニックについては、垂直方向の配置についての記事を参照してください。 .

以上がの内側を垂直方向に整列させるには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：CSSを使用してテキストを大きく見せずに垂直方向に伸ばすことはできますか? 次の記事：「Input」要素が「Body」からフォントを継承しないのはなぜですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事