search

Home >Daily Programming >HTML Knowledge >How to achieve the centering effect of Div content

How to achieve the centering effect of Div content

藏色散人
藏色散人Original
2018-11-09 15:53:147351browse

This article mainly introduces to you Centering div contentThat is, the effect method of centering div content up, down, left, and right.

I believe everyone is very familiar with the effect of centering div content, such as our common website navigation bar. So in the previous article, I introduced to you the implementation methods of div horizontal centering and div vertical centering.

Recommended learning reference: "HTML Tutorial"

The following will continue to introduce to you how to achieve the effect of div content centering.

The code for centering the div contentThe example is as follows: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div内容居中</title>
</head>
<body>
<div style="line-height: 200px;margin: 0 auto;text-align: center; width: 200px;  background: red;">
    PHP中文网
</div>
</body>
</html>

The front-end effect is as shown below:

How to achieve the centering effect of Div content

As shown in the figure, the content in the div is centered.

Here we set the line-height attribute to ensure that the content is vertically centered and set the text-align: center; attribute to ensure that the div content is horizontally centered.

The margin: 0 auto; attribute is set so that the div can be displayed horizontally and centered in the browser page. Of course, it does not need to be set. If margin is not set, the div content will still be displayed in the center, as shown in the figure below. :

How to achieve the centering effect of Div content

Related attribute summary:

line-height The property sets the distance between lines (line height).

text-align The attribute specifies the horizontal alignment of the text in the element, and center means to arrange the text to the middle.

This article is about the implementation method of Div content centering effect. It is very simple and easy to understand. I hope it will be helpful to friends who need it!

The above is the detailed content of How to achieve the centering effect of Div content. 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：How to achieve the vertical centering effect of DivNext article：How to achieve the vertical centering effect of Div

Related articles

See more