如何在CSS中使文本居中并控制用户缩放

发布于 2024-12-05 07:19:54 字数 159 浏览 1 评论 0原文

基本上我试图将页脚设置到中心，但是当我放大/缩小时它会移动，

这是我的代码：

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

原文

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

this is my code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半仙 2024-12-12 07:19:54

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

回复收藏 0 原文

独享拥抱 2024-12-12 07:19:54

您可以尝试将页脚绝对相对地定位，这是有用的 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>

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>

回复收藏 0 原文

~没有更多了~