居中网页 [英] Centering a web page

查看:214
本文介绍了居中网页的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试找到我的网页。还有一个最小的1000px与它放大。目前我的网页,因为它缩放它是中心30%-center-70%。我很困惑为什么这种情况发生。如果任何人可以解释为什么这是发生,这将是巨大的。

I am trying to center my webpage. Also there is a min 1000px with and it scales up. Currently my page as it scales it is off centered 30%-center-70%. I am confused as to why this is happening. If anyone can explain why this is happening that would be great.

>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css">


#page {
    position:relative;
    display:block;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:0;
}
#pageImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:1;
}
#navBarImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:2;
}

</style>
</head>
<body>
<div id="page">
    <img id="pageImg" src="../Navigation/backgroundImg.png" />
    <div id="navBar">
        <img id="navBarImg" src="../Navigation/navBarBGImg.png" />
    </div>
</div>
</body>
</html>


推荐答案

已发布。这可以推断,因为你做的post代码工作,因为你打算。 工作示例(1000像素宽度将不适合呈现窗口的默认窗口大小,请使用滑块

There is additional code to consider that you haven't posted yet. This can be inferred because the code you did post works as you intend it to. A working example (the 1000px width won't fit in the default window size of the rendered window, use the sliders to expand it and see your code is working).

您使用的CSS:

#page {
    position:relative;
    display:block;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:0;
}
#pageImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:1;
}
#navBarImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:2;
}

这篇关于居中网页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆