How to set css font to be centered in a single line

How to set a single line of CSS fonts to be centered: first create a div; then write a p tag in the div; finally, set the "text-align: center;" attribute to achieve single line centering.

The operating environment of this tutorial: Dell G3 computer, Windows 7 system, HTML5&&CSS3 version.

css Set the font to be centered in a single line

1. First, for the convenience of observation, create a div

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

2. Then write a p tag in the div and set its text-align: center; attribute to center a single line.

<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. If it is an inline element such as span, you can add the text-align: center; attribute to its parent element

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

4. To achieve vertical centering of a single line of text, just set line-height to be the same as the height of the parent element.

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

Recommended: "css video tutorial"

The above is the detailed content of How to set css font to be centered in a single line. For more information, please follow other related articles on the PHP Chinese website!