Html 缩小时如何将整个页面缩小到中心？_Html_Css_Responsiveness_Responsive

Html 缩小时如何将整个页面缩小到中心？

html css

Html 缩小时如何将整个页面缩小到中心？,html,css,responsiveness,responsive,Html,Css,Responsiveness,Responsive,如果页面被缩小，如何将网页及其所有内容缩小到中心？这是在缩小之前。这是在缩小之后如何在缩小时缩小到页面中心我使用的代码是 <title>Demo</title> <head>This is a demo</head> <style> #my-div{ margin-left: auto; margin-right: auto; width: 80%; height: 50%; } #nav { ba

如果页面被缩小，如何将网页及其所有内容缩小到中心？这是在缩小之前。这是在缩小之后

如何在缩小时缩小到页面中心

我使用的代码是

    <title>Demo</title>
<head>This is a demo</head>
<style>
#my-div{

  margin-left: auto;
  margin-right: auto;

  width: 80%;
  height: 50%;
}
#nav
{
background-color: red;
float: left;
width: 200px;
position:relative;

}

#detail
{
background-color: green;
float : right;
width: 800px;
position:relative;
}

div.testDetail 
{
margin-top:10px;
margin-left:20px;
margin-right:20px;
margin-bottom:10px;
}

#container
{
width:1000px;
position:relative;
}
</style>

<hr>
<body style="background-color:blue";>


<div id="my-div">
<div id="container">
<div id="nav">
    <ul>Tests</ul>
</div>
<div id="detail">
    <div class="testDetail">
        <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
        <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
        <h3>Title</h3>
        <p>Testing</p>
    </div>
    </div>
    <hr>
</div>
</div>
<body>

Demo
这是一个演示
#我的部门{
左边距：自动；
右边距：自动；
宽度：80%；
身高：50%；
}
#导航
{
背景色：红色；
浮动：左；
宽度：200px；
位置：相对位置；
}
#细部
{
背景颜色：绿色；
浮动：对；
宽度：800px；
位置：相对位置；
}
div.testDetail
{
边缘顶部：10px；
左边距：20px；
右边距：20px；
边缘底部：10px；
}
#容器
{
宽度：1000px；
位置：相对位置；
}

测试
标题
测试

也许您可以分享代码示例

您可以尝试使用css属性：

margin:0自动以使块居中（在您的情况下可能是主体）
问候
[编辑]
首先，您的HTML中有错误：
正确关闭车身标签
删除“；”在开放体标签中
用html标记包装代码
添加doctype（我的代码中使用的html5）
将样式放在头标签中
将标题放在标题标签内
删除头标记中的文本节点
请也缩进
[编辑]
这里的代码在更正后工作，我使用百分比而不是像素尺寸，享受：
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <style>
            body{
                margin: 0 auto;
                width: 100%;
            }

            #my-div{
                margin: 0 auto;
                width: 80%;
                height: 50%;
            }

            #nav
            {
                background-color: red;
                float: left;
                width: 20%;
                position:relative;

            }

            #detail
            {
                background-color: green;
                float : right;
                width: 80%
                position:relative;
            }

            div.testDetail
            {
                margin-top:10px;
                margin-left:20px;
                margin-right:20px;
                margin-bottom:10px;
            }

            #container
            {
                width:auto;
                position:relative;
            }
        </style>
    </head>
    <body style="background-color:blue">
        <div id="my-div">
            <div id="container">
                <div id="nav">
                    <ul>Tests</ul>
                </div>
                <div id="detail">
                    <div class="testDetail">
                        <image style="float:right;margin:5px;" src="test1.jpg" width="50px" height="50px"/>
                        <image style="float:right;margin:5px;" src="test2.jpg" width="50px" height="50px"/>
                        <image style="float:right;margin:5px;" src="test3.jpg" width="50px" height="50px"/>
                        <image style="float:right;margin:5px;" src="test4.jpg" width="50px" height="50px"/>
                        <h3>Title</h3>
                        <p>Testing</p>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </body>
</html>


演示
身体{
保证金：0自动；
宽度：100%；
}
#我的部门{
保证金：0自动；
宽度：80%；
身高：50%；
}
#导航
{
背景色：红色；
浮动：左；
宽度：20%；
位置：相对位置；
}
#细部
{
背景颜色：绿色；
浮动：对；
宽度：80%
位置：相对位置；
}
div.testDetail
{
边缘顶部：10px；
左边距：20px；
右边距：20px；
边缘底部：10px；
}
#容器
{
宽度：自动；
位置：相对位置；
}
测试
标题
测试

您应该在css中使用引导框架以下是您的解决方案：

将整个页面保留在main div中，并在其上应用类
例如：
所有内容都在这里
给这个类赋予风格：
.包装纸{
margin:0 auto;
max-width:400px; /* required width fixed or percentage */
background:red;

}
您实际上是在将页面居中，但这并不明显。原因是#my div元素的宽度为80%，而它们的所有子元素都在1000像素的容器中
这将解决您的问题：
#my-div{
    width: 1000px;
}

您可以选择使用max width
，但对于您的示例，确实没有理由这样做。
请提供示例代码。您可能可以添加margin:auto
，以确保内容居中。请提供代码示例，以及您迄今为止的尝试。是的，我已经分享了该示例代码