CSSの垂直方向の配置が機能しない理由とその解決方法-CSSチュートリアル-php.cn

CSSの垂直方向の配置が機能しない理由とその解決方法

不言

リリース： 2018-11-23 14:20:02

オリジナル

3707 人が閲覧しました

verticla-align はインライン要素の垂直位置を調整するために使用されますが、時々機能しない場合があります。この記事では、CSS の垂直方向の配置が機能しない原因と解決策について説明します。

まずは垂直方向の配置が無効な理由を分析してみましょう

位置を垂直方向に配置する属性としてvertical-alignを使用する場合、多くの人がこのような問題に遭遇すると思います。、なぜか全然動かない！

実際には、vertical-align は「インライン要素」と「表のセル」にのみ使用できます。

vertical-align の使い方

「インライン要素」または「表のセル」のどこに揃えたいかを記述します。

「テキストのベースラインを変更したい」を内部要素に適用する場合。テキストのベースラインがデフォルトの位置です。

CSSの垂直方向の配置が機能しない理由とその解決方法

#この位置は上げたり下げたりできます。

基本的には上、下、中央があり、ピクセルや%数値で指定することもできます。

表のセルに該当する場合は「縦方向に並べた場合」となります。

具体的な例を見てみましょう:

たとえば、vertical-align を使用して垂直方向の中央揃えを実現したい場合は、次のコードを参照してください。

最初にこのようなボックスを準備します

HTML

<div class ="box-wrap"> 
  <div class ="box"> 
    <p>文字内容</p> 
  </div> 
  </div>

ログイン後にコピー

CSS

.box{
  background-color: #66b6d5;
  width: 300px;
  height: 200px;
}
p{
  color: #fff;
}

ログイン後にコピー

効果は次のとおりです:

CSSの垂直方向の配置が機能しない理由とその解決方法

次に、「display: table - cell;」と「vertical - align: middle;」を .box に追加します。

.box{
  display: table-cell;
  vertical-align: middle;
  background-color: #66b6d5;
  width: 300px;
  height: 200px;
}
p{
  color: #fff;
}

ログイン後にコピー

効果は次のとおりです: 垂直方向のセンタリングが達成されます

CSSの垂直方向の配置が機能しない理由とその解決方法

垂直方向の位置指定を達成するには、テーブルの高さは必須です。

高さを親要素に依存させたい場合は、親要素を display: table として指定し、さらに hight も指定してください。

垂直と整列、上と下の違いについても同様です。

コードは次のとおりです:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .box-wrapper{
  display: table;
  height: 200px;
}
.box{
  width: 300px;
  background-color: #66b6d5;
  display: table-cell;
  border: 1px #fff solid;
}
.box.middle{
  vertical-align: middle;
}
.box.top{
  vertical-align: top;
}
.box.bottom{
  vertical-align: bottom;
}
p{
  color: #fff;
}
 </style>
  </head>
  <body>
<div class="box-wrapper">
  <div class="box middle">
     <p>文字内容</p>
  </div>
  <div class="box top">
     <p>文字内容</p>
  </div>
  <div class="box bottom">
     <p>文字内容</p>
  </div>
</div>
  </body>
</html>

ログイン後にコピー

効果は次のとおりです:

CSSの垂直方向の配置が機能しない理由とその解決方法