検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで文字を縦方向に揃える方法

CSSで文字を縦方向に揃える方法

藏色散人
藏色散人オリジナル
2020-12-18 10:17:195405ブラウズ

CSS でテキストを垂直方向に配置する方法: 1. テキスト行の実際の高さを行の高さと等しくなるように設定します; 2. 上下のパディング値を次のように設定します高さが不明な複数行のテキストを垂直方向に中央揃えにする場合も同様です。 ;3. 複数行のテキストを固定高さで中央揃えにするには、vertical-align を使用します。

CSSで文字を縦方向に揃える方法

#このチュートリアルの動作環境: Windows7 システム、HTML5&&CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨事項: "

css ビデオ チュートリアル "

1. 1 行のテキストの垂直方向の中央揃え

テキストが 1 行しかない場合コンテナ内で中央に配置する これは比較的単純で、実際の高さを行の高さに等しく設定するだけです。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单行文字实现垂直居中 </title>
<style type="text/css">
div {
height: 100px;
line-height: 100px;
border: 1px solid #FF0099;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>

レンダリング:

CSSで文字を縦方向に揃える方法

ただし、Internet Explorer 6 以前では、このメソッドは画像をサポートしていません。 垂直方向の中央揃えを設定します。 。

2. 高さが不明な複数行テキストの垂直方向の中央揃え

コンテンツの高さが可変の場合は、前のセクションで説明した水平方向の中央揃え方法を使用できます。最後の方法は、上部と下部のパディング値が同じになるようにパディングを設定することです。繰り返しますが、これは垂直方向の中央揃えのように「見えます」が、テキストを
内に完全に埋める方法にすぎません。次のようなコードを使用できます: 

div {
padding:25px;
}

例: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div {
padding: 25px;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
div {
padding:25px;
border:1px solid #FF0099;
}

以上がCSSで文字を縦方向に揃える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3 html display padding table
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで親要素を選択する方法次の記事：CSSで親要素を選択する方法

関連記事

続きを見る