CSSフォントを単一行の中央に配置するように設定する方法

CSS フォントの 1 行を中央揃えに設定する方法: まず div を作成し、次に div に p タグを書き込みます。最後に、「text-align: center;」属性を設定して 1 行を中央揃えにします。 。

このチュートリアルの動作環境: Dell G3 コンピューター、Windows 7 システム、HTML5&&CSS3 バージョン。

#css フォントを 1 行の中央に配置するように設定します

1. まず、観察しやすいように、div

<style>
    .app{
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
    }
</style>
<div class="app">
    
</div>

# を作成します。

## 2. 次に、div に p タグを記述し、その text-align: center; 属性を 1 行を中央揃えに設定します。

<style>
    .app{
        width: 200px;
        height: 100px;
        border: 1px solid skyblue;
    }
    .app > p{
        text-align: center;
        overflow: hidden;　
        text-overflow:ellipsis;　　
        white-space: nowrap;
    }
</style>
<div class="app">
    <p>Hello World！</p>
</div>

3.span などのインライン要素の場合は、その親要素

<style>
    .app{
        width: 200px;
        height: 100px;
        text-align: center;
        border: 1px solid skyblue;
    }
</style>
<div class="app">
    <span>Hello World！</span>
</div>

に text-align: center; 属性を追加できます。 4. 単一行のテキストを垂直方向の中央揃えにするには、line-height を親要素の高さと同じに設定するだけです。

<style>
    .app{
        width: 200px;
        height: 100px;
        text-align: center;
        border: 1px solid skyblue;
    }
    .app > span{
        line-height: 100px;
    }
</style>
<div class="app">
    <span>Hello World！</span>
</div>

推奨: 「

css ビデオ チュートリアル

」

以上がCSSフォントを単一行の中央に配置するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。