html centering problem_html/css_WEB-ITnose-HTML Tutorial-php.cn

html centering problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:10:30

Original

1131 people have browsed it

When making a page, add a layer

in the body, and then use #wraps{ margin:0px auto; width:960px;}

This is centered, but when the content changes and a vertical scroll bar appears on the body, the entire content will move horizontally.

The solution I am currently thinking of is to always display the vertical scroll bar. But don't know what to do? Or do you have any other good solutions?

Note: The height of the page is uncertain, so the presence or absence of the vertical scroll bar is also uncertain.

Reply to discussion (solution)

body,html{width:100%;height:100%; overflow-x:hidden;min-width:960px;margin:0;padding:0;}

body,html{width:100%;height:100%;overflow-x:hidden;min-width :960px;margin:0;padding:0;}

It doesn’t work

The scroll bar will probably have a distance of more than 10 pixels, and the margin left and right auto will of course be recalculated, and there will be a slight adjustment. Don't you want it to be recalculated?

It is best not to give a percentage of width:960px; to control the scroll bar

<!DOCTYPE HTML><html>	<head>		<meta charset="gb2312" />		<title></title>		<style>			#wraps{				margin:0px auto; width:960px;				border:1px solid red;				position:relative; left:0; top:0;			}		</style>	</head>	<body>		<div id="wraps">123</div>		<button id="btn">body长高了，div会移动吗？</button>		<script>			var $ = function(id){				return document.getElementById(id);			};			var $t = function(tag, cot){				cot = cot || document;				return cot.getElementsByTagName(tag);			};			var a = document.body.offsetWidth;			$('btn').onclick = function(){				$t('body')[0].style.height = '2000px';				var b = document.body.offsetWidth;				var t = a - b;				//console.log(t)				if( t ){					$('wraps').style.left = t/2+'px';				}							}		</script>			</body></html>

Copy after login

What does this mean?

On the 5th floor, what if you change the browser window size? Maximize, restore...

HTML code

< ;meta charset="gb2312" />
gin:0px auto; width:960px;
...

That’s what it means. Your method is also worthy of reference, but as changjay said, there is still a little problem when switching between medium size and maximum size. Thank you! Looking forward to a better solution, I will also write js myself.