Question

基本上我正试图设置一个页脚到中心，但当我放大/缩小它移动

这是我的代码：

div#footer  {
font-size:16px;
text-align:center;
position:absolute;
bottom:0;
}

Answer 1

您可以尝试将左侧和右侧的边距或填充设置为：50％

Answer 2

你可以尝试绝对相对地定位你的页脚这对于定位页面元素是有用的css技巧，并且无论如何都会留在你放置它们的位置。

基本上你要做的是将你的页脚包裹在一个相对定位的div中，然后将div设置为100％宽，然后将你的页脚绝对放在相对定位的div中，这应该让你的页脚完全保持在屏幕的中心位置无论屏幕大小如何变化。

由于这个概念有点抽象来解释我已经创建了一些简单的演示代码来演示你会看到的是一个粉红色的盒子，位于蓝色框的正中心，无论你如何改变屏幕方面的粉红色框总是停留在屏幕的中心，你可以放大或缩小你可以改变窗口的大小，这无关紧要希望这会有所帮助。

<!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>

如何居中文本和控制用户放大CSS

2 个答案: