Home > Web Front-end > CSS Tutorial > An excellent solution for DIV centering_Experience exchange

An excellent solution for DIV centering_Experience exchange

WBOY
Release: 2016-05-16 12:10:28
Original
1751 people have browsed it

When we reconstruct the WEB now, we usually center the DIV like this:

Copy the code The code is as follows:

body{
margin:0px auto;
text-align:center;
}

But when the following parsing method is not declared, the page An error will occur. It cannot be centered and aligned!
Copy code The code is as follows:



Troubled by this It took me a few days. Then some friends will say: Can't you just add this sentence? But sometimes the page cannot be written according to the code format specified above, for example, you need to change the colorful scroll bar.
Until yesterday, an idea flashed in my mind. Why not use JS to control the margins of the page? Just do it!
I found a page. I added the following short piece of code.
Copy code The code is as follows:



function.js content:
Copy code The code is as follows:

if(window.screen.width>800){document.write("");}

Save and test. Haha, I changed a few resolutions All can be centered normally! So far, the test has been successful.
To summarize:
Mainly because of the role of this code:
Copy code The code is as follows:

(window.screen.width-800)/2 //Calculate the margin value that should be left on the page. 800 is my DIV width + scroll bar width. Actual Change the application to your own size.

Additional point: the above JS must be placed after your last CSS connection or .
Welcome everyone to my A better way to implement small station communication!
Related labels:
div
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template