How to center text in css? How to set vertical centering of css text

In the process of web design, sometimes you may need to center the text for a beautiful layout. So, how to center the text? This article will introduce to you how to set vertical centering of text in css.

First of all, we need to know that it is relatively simple to achieve horizontal centering of elements through CSS: for text, you only need to set text-align: center on its parent element, and for block-level elements such as div, you only need to set The margin values ​​of left and right are auto; to achieve vertical centering of elements, some people will think of the vertical-align attribute in CSS, but it only takes effect for elements with the valign attribute. So next let’s take a look at how css implements single text vertical centering and multi-text vertical centering.

Let’s first look at css single line text vertical centering

For single line text, we only need to change the text line height (line-height) and the area Just set the height to be consistent.

Css single-line text vertical centering implementation code:

HTML:

<div id="div1">
        php中文网单行文本垂直居中
    </div>

CSS:

 #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

The vertical centering effect of a single line of css text is as follows:

Then let’s take a look at more Line text vertical centering

Explanation: There are two situations for vertical centering of multi-line text. One is that the height of the parent element is not fixed and changes with the content; the other is that the height of the parent element is fixed.

1. The height of the parent element is not fixed

When the height of the parent element is not fixed, the height can only be expanded by the internal text. So, we can make the text appear vertically centered by setting the value of padding, just set the values ​​of padding-top and padding-bottom to be equal:

css multiline text vertically centered Code:

HTML:

  <div id="div1">
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中。
    </div>

CSS:

  #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;
        }

css multi-line text vertical centering effect is as follows:

2. The height of the parent element is fixed.

The vertical-align attribute in css only takes effect for elements with the valign attribute. Combined with display: table; can make div simulate the table attribute. Therefore, we can set the display attribute of the parent div: display: table;; then add a div containing text content and set its display: table-cell; and vertical-align: middle.

css multiline text vertical centering code:

HTML:

<div id="outer">
        <div id="middle">
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中。
        </div>
    </div>

CSS:

#outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }

The vertical centering effect of css multi-line text is as follows:

This article ends here. In fact, there are other methods that I will not introduce one by one. , for more exciting content, you can pay attention to the php Chinese website.

The above is the detailed content of How to center text in css? How to set vertical centering of css text. For more information, please follow other related articles on the PHP Chinese website!