Home > Article > Web Front-end > How to use display:table-cell to achieve vertical centering?

How to use display:table-cell to achieve vertical centering?

不言Original: 2018-10-24 15:26:255107browse

In web page layout, we often need to vertically center pictures or text. There are many ways to achieve vertical centering. Today I will introduce to you how to achieve vertical centering using the display:table-cell attribute. Let’s look at it below. See the specific content.

First of all, let’s take a brief look at display:table-cell attribute

display:table-cell attribute means that the label element is presented in the form of a table cell, similar to td tag, use display:table-cell to vertically center elements with non-fixed sizes.

Next let’s look at a specific example of display:table-cell achieving vertical centering:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
        .img{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 200px;
            height: 300px;
            border: 1px solid lightgreen;
            background-color: lightblue;
        }
        .text{
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 300px;
            border: 1px solid lightgreen;
            padding: 10px;
             background-color: lightblue;
        }
</style>
</head>
<body>
<div>
        <div>
            <img src="image/girl.jpg" width="80px" height="100px" alt="">
        </div>
        <div>
            <p>php中文网在线免费教程 </p>
        </div>
    </div>
</body>
</html>

display:table-cell achieves vertical centering as follows:

How to use display:table-cell to achieve vertical centering?

Note: 1. IE6/7 does not support the display:table-cell attribute; 2. table-cell does not support the margin attribute (but supports padding), which is very rigid; 3. Try not to use it with floating/positioning at the same time, as it will destroy its css properties.

The above is the entire content of this article. For more knowledge about the display:table-cell attribute, you can refer to the php Chinese website css Learning Manual.

The above is the detailed content of How to use display:table-cell to achieve vertical centering?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does display block mean? how to use?Next article：What does display block mean? how to use?

See more

How to use display:table-cell to achieve vertical centering?

Related articles