CSSフォントを単一行の中央に配置するように設定する方法-CSSチュートリアル-php.cn

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

藏色散人

リリース： 2023-01-04 09:38:18

オリジナル

3088 人が閲覧しました

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

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

このチュートリアルの動作環境: 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>

ログイン後にコピー

# を作成します。

CSSフォントを単一行の中央に配置するように設定する方法 ## 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>

ログイン後にコピー

CSSフォントを単一行の中央に配置するように設定する方法 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フォントを単一行の中央に配置するように設定する方法推奨: 「