Shulou(Shulou.com)06/01 Report--

Today Xiaobian to share with you how to use the css display:table and display:table-cell related knowledge points, detailed content, clear logic, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you have some gains after reading this article, let's learn about it together.

Here is a question to ask: Center the multiline text vertically in the block? When you think of vertical centering, you think of line-height = height for single-line text; vertical centering for block-level elements; position positioning; or flex layout. But here I show you how display: table and table-cell center multiline text vertically. Although it doesn't feel like much, it still works sometimes, as follows

Code directly:

html:

The meeting held that since the 18th National Congress of the Communist Party of China, China's economic development has made historic achievements.

Historical changes have taken place, providing important material conditions for reform and development in other fields. economic strength

To a new level, the economy grew at an average annual rate of 7.1%, becoming the main power source and stabilizer of world economic growth.

css:

.parent{

display:table;

width:300px;

height:300px;

text-align:center;

}

.son{

display:table-cell;

height:200px;

background-color:yellow;

vertical-align:middle;

}

After reading the code is not an instant to understand, here we just need to set the container to display:table and it becomes a block-level table element, child element display:table-cell makes the child element into a table cell, and then just like in the table, add a vertical-align:middle to the child element, and the multi-line text is vertically centered.

The above is "how to use display:table and display:table-cell in css" all the contents of this article, thank you for reading! I believe everyone has a great harvest after reading this article. Xiaobian will update different knowledge for everyone every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.