how to center text and control user zoom in CSS_问答_开发者

how to center text and control user zoom in CSS

开发者 https://www.devze.com 2023-04-05 10:23 出处：网络

basically i\'m trying to set a footer to the center but when i zoom in / out it moves this is my code:

相关专题：css zooming

basically i'm trying to set a footer to the center but when i zoom in / out it moves

this is my code:

div#foot开发者_JAVA百科er  {
font-size:16px;
text-align:center;
position:absolute;
bottom:0;
}

You could try setting either the margins or padding for both the left and right to :50%

You could try positioning your footer absolutely relative this is useful css trick for positioning page elements and making then stay where you put them no matter what.

Basically what you want to do is wrap your footer in a relatively positioned div then make that div 100% wide then absolutely position your footer inside the relatively positioned div, this should make your footer stay exactly in the centre of the screen no matter how the screen size changes.

As this concept is a little abstract to explain I've created some simple demo code to demonstrate what you will see is a pink box positioned in the exact centre of a blue box and no matter how you change the screen side the pink box always stays in the centre of the screen you can zoom in or out you can change the size of the window it doesn't matter hope this helps.

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">

<html>
<head>
<title>absolutely relative positioning demo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

div.wraper 
{
height:200px; 
width:100%; 
position:relative; 
background-color:blue
}

div.content 
{
height:100px; 
width:100px; 
background-color:pink; 
position:absolute; 
left:50%; 
top:50px; 
margin-left:-50px
}

</style>

</head>

<body>

<div class="wraper">

<div class="content"></div>

</div>

</body>
</html>