Get the App
SLTechnology News&Howtos  ›  Development  › 

How to solve the problem that the div+css layout page is not centered in the browser

Shulou Source: shulou.com Published: 2022-06-01 07:44:24 09月23日 Update

This article mainly introduces div+css layout web page in the browser is not centered how to solve the related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe everyone read this div+css layout web page in the browser is not centered how to solve the article will have some gains, let's take a look at it.

DIV layout pages are centered in other browsers, but the main content of the page is laid out to the left in Google Chrome, not centered.

Screenshot of page layout left effect

Web pages are centered in browsers such as ie6/ie7/ie8, but are left and not centered in browsers such as Google Chrome. Extended reading: CSS text centered

Solving this layout compatibility problem is simple, we just need to set the CSS layout centering property on the outermost DIV layout box.

CSS code needs to be added:

margin:0 auto

EXP

Suppose the original outermost CSS is named "#warp" and the CSS width is 1000px.

#warp{width:1000px}

This box will be centered in Internet Explorer, but in some browsers, especially Google Chrome, it will not be centered and the layout will be displayed to the left.

At this point we add margin:0 auto style to solve all browsers will be displayed in the center.

#warp{width:1000px;margin:0 auto}

This way objects introduced into the object box will appear centered in the browser.

Screenshot of achieving layout centering effect

About "div+css layout web page in the browser is not centered how to solve" the content of this article is introduced here, thank you for reading! I believe that everyone has a certain understanding of the knowledge of "div+css layout page is not centered in the browser." If you still want to learn more knowledge, please pay attention to the industry information channel.

Tags: Layout browser browsing web page content object box knowledge outer layer screenshot effect article lieutenant general subject code value width attributes simple operation text Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno vpn Microsoft Linux Shulou Information macOS