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:
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. :
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Zend Studio 13.0.1
Powerful PHP integrated development environment
Atom editor mac version download
The most popular open source editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
