ホームページ > 記事 > ウェブフロントエンド > CSSを使用してフレーム内のテキストの垂直位置を設定する方法

CSSを使用してフレーム内のテキストの垂直位置を設定する方法

不言オリジナル: 2018-11-15 11:13:394377ブラウズ

Web ページのレイアウトでは縦書きのテキストがよく使われるので、この記事では CSS を使用してフレーム内のテキストの縦方向の位置を指定する方法について説明します。参考までにできます。

前回の記事では、CSSのtext-align属性を使ってテキストの水平方向の位置を指定する方法を紹介しました。フレーム内。

フレーム内のテキストの垂直位置を直接指定するプロパティはないため、次の方法で設定できます。 (推奨コース:)

方法方法 1: フレームスタイルを表のセルに変更し、vertical-align 属性を使用する

フレームを変更するスタイルを表のセルに変更した場合、vertical-align 属性を使用して垂直位置を指定できます。

CSSに以下のコードを記述し、垂直位置を設定します。

#上揃えの例

.TextVerticalTop {
  display: table-cell;  
  vertical-align: top;
}

下揃えの例

.TextVerticalBottom {
  display: table-cell;  
  vertical-align: bottom;
}

中央揃えの例

.TextVerticalCenter {
  display: table-cell;  
  vertical-align: middle;
}

方法2:position:relativeを使用して相対位置で指定する

position:relativeでスタイルを指定すると、内部の配置位置を相対座標で指定できます。

表示する文字列の位置を相対位置(「50%」など)で指定します。

#上揃えの例

span.top {
    position: absolute;    
    top: 0;
}

下揃えの例

span.bottom {
    position: absolute;    
    bottom: 0;
}

中央揃えの例

span.center {
    position: absolute;    
    top: 50%;    
    margin-top: -0.5em;
}

コード例: display: table-cell を使用します。

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

TextAlignVerticalCell.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
     <link rel="stylesheet" href="TextAlignVerticalCell.css" />
     </head>
     <body>
  <div class="TextVerticalTop">
    顶部垂直对齐。  </div>
  <br />
  <div class="TextVerticalBottom">
    底部垂直对齐。  </div>
  <br />
  <div class="TextVerticalCenter">
    居中垂直对齐。  </div>
    </body>
    </html>

TextAlignVerticalCell . css

.TextVerticalTop {
    height:96px;    
    width:280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #009347;    
    display: table-cell;    
    vertical-align: top;
    }
.TextVerticalBottom {
    height: 96px;    
    width: 280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #009347;    
    display: table-cell;    
    vertical-align: bottom;
    }
.TextVerticalCenter {
    height: 96px;    
    width: 280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #009347;    
    display: table-cell;    
    vertical-align: middle;
    }

説明:

display: table-cell は div タグをテーブルのセルとして処理します。表のセルとして処理するときにvertical-align属性を効果的に使用するには、vertical-alignを使用して内部テキストの垂直位置を設定します。

display: table-cell が設定されます。これはブロック要素ではなくなったため、div タグの最後で折り返されず、改行文字
が使用されます。

表示結果:

Web ブラウザを使用して、上記の HTML ファイルを表示します。以下のような効果が表示されます。

#コード例:position:relative の使用 CSSを使用してフレーム内のテキストの垂直位置を設定する方法

#TextAlignVertical.html

<!DOCTYPE html><html><head>
    <meta charset="utf-8" />
    <title></title>
     <link rel="stylesheet" href="TextAlignVertical.css" />
</head>
<body>
  <div class="Frame">
    <span class="top">顶部垂直对齐。</span></div>
  <br />
  <div class="Frame">
    <span class="bottom">底部垂直对齐。</span></div>
  <br />
  <div class="Frame">
    <span class="center">居中垂直对齐。</span>
  </div>
</body>
</html>

TextAlignVertical.css

.Frame {
    height: 96px;    
    width: 280px;    
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #8b5285;    
    position: relative;
}
span.top {
    position: absolute;    
    top: 0;
}
span.bottom {
    position: absolute;    
    bottom: 0;
}
span.center {
    position: absolute;    
    top: 50%;    
    margin-top: -0.5em;
}

説明:

position:relativeを外側のdivタグに設定し、相対座標で指定します。文字を上揃えにする場合は、内側の文字スタイルのtop属性に0を指定します。テキストを下に揃えたい場合はbottom属性に0を指定します。センターの場合はtop属性に50%を指定します。ただし、テキストの左上隅の座標は 50% の位置にあるため、テキスト行の高さはフレームの中央で半分ずつずらす必要があり、その値は margin-top 属性の - 0.5 em です。

結果は次のとおりです。

Web ブラウザを使用して上記の HTML ファイルを表示します。以下のような効果が表示されます。

CSSを使用してフレーム内のテキストの垂直位置を設定する方法

以上がCSSを使用してフレーム内のテキストの垂直位置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：CSS を使用してテキストを左、右、中央に揃える方法次の記事：CSS を使用してテキストを左、右、中央に揃える方法

続きを見る