CSSで文字を縦方向に揃える方法-CSSチュートリアル-php.cn

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;
}

ログイン後にコピー

Rendering:

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

3. 固定高マルチのセンタリング-line text

CSS のvertical-align 属性は、valign 属性を持つ (X)HTML タグでのみ機能しますが、CSS にはをシミュレートできる display 属性もあります。この属性を使用します

で

をシミュレートすると、vertical-align を使用できます。

display:table と display:table-cell を使用する場合、前者は親要素に設定し、後者は子要素に設定する必要があるため、別の < を追加する必要があることに注意してください。配置する必要があるテキスト。;div>要素:

div#wrap {
height:400px;
display:table;
}
div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
width:760px;
}

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div#wrap {
height: 300px;
display: table;
}
div#content {
vertical-align: middle;
display: table-cell;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！现在我们要使这段文字垂直居中显示！
</div>
</div>
</body>
</html>

ログイン後にコピー

レンダリング:

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