简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  の内側を垂直方向に整列させるには?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-28 02:22:01521ブラウズ

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 サイトの他の関連記事を参照してください。

for default this position margin
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSを使用してテキストを大きく見せずに垂直方向に伸ばすことはできますか?次の記事：CSSを使用してテキストを大きく見せずに垂直方向に伸ばすことはできますか?

関連記事

続きを見る