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

This article mainly explains the "div content horizontal center and div content vertical center how to achieve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "div content horizontal center and div content vertical center how to achieve" it!

The mode within the div is centered:

Form is equally divided into the horizontal center of div content and the vertical center of div form.

Div form level center compared to the structure div center, and div mode center is relatively simple, only need to set a form center css (text-align:center), form vertical center (line-height).

1. The form of div is in the middle. CSS:

Text-align:center

Whether it is p or div, it is possible to configure this CSS to center the level of form within the corresponding object.

2. Vertical center row height attribute of div mode:

Line-height

To center vertically in the form of only one line in the div, the height (height) set to the div is usually the same as the line-height (line height), and the div content can be centered vertically.

3. Div mode horizontal center and vertical center example code

Div mode centered instance CSS5#juzhong {width:320px;height:100px; line-height:100px; text-align:center; border:1px solid # F00} text-align and line-height configuration are centered horizontally and vertically

4. Screenshot

Div content level centered and div content vertically centered structure example

From the image above, you can roughly see that the div content implementation is in the middle of both cases, but margin:0 auto is not set and div is not in the middle.

Thank you for your reading, the above is the "div content horizontal center and div content vertical center how to achieve" the content, after the study of this article, I believe you on the div content horizontal center and div content vertical center how to achieve this problem has a deeper understanding, the specific use of the need for everyone to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.