Get the App
SLTechnology News&Howtos  ›  Development  › 

What is the way to center the div level?

Shulou Source: shulou.com Published: 2022-06-01 23:34:10 09月15日 Update

This article mainly explains "what is the method of keeping the div level in the middle". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the method of keeping the div level in the middle"?

I. introduction to the implementation of div centering

When laying out a web page, the main frame of the web page is usually centered in the browser. Achieving horizontal centering of the outermost DIV in the browser requires a condition and a setting.

If the CSS of the outermost DIV box is named "#", the outermost box is centered for compatibility with major browsers.

One condition:

At this time, set the css content center style (text-align:center) for "body"

That is CSS code:

Body {text-align:center}

One setting:

At this time, set the necessary style css margin for the center of "#"

That is CSS code:

# {margin:0 auto} II. Examples of DIV centered usage

In order to observe the effect of the layout center, we add a css border to "#" with a css width of 300px and a height of 100px style.

1. Finally get the CSS code with the center of DIV:

Body {text-align:center} # {margin:0 auto;border:1px solid # 000th widthbank 300pxposition heightwise 100px}

2. Corresponding html code snippet:

A case of DIV level in the middle

3. Screenshot of the case in the middle

DIV horizontal center effect diagram

At this point, I believe that you have a deeper understanding of "what is the middle level of div". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Tags: Level method code content outer layer time style browser browse layout effect condition case box web page learning practical deeper subject interest Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Technology NVidia Apple Microsoft macOS