Html 无法完全收缩包裹图元并使其居中
我使用以下代码创建一个收缩包装和居中的页面。如果浏览器窗口宽度大于最大潜在宽度，则一切正常。在这种情况下，有三个固定宽度的浮动段落。如果窗口足够宽，使它们都可以浮动在同一条线上，则div将正确居中并缠绕。但是，当浏览器更窄，其中一个段落换行到下一行时，div将扩展到窗口的整个宽度，不再收缩换行。我已经尝试了我能想到的一切，除非有人有新的想法，否则我将放弃并继续前进。奇怪的是，它在ie7中运行良好。算了吧Html 无法完全收缩包裹图元并使其居中,html,css,Html,Css,我使用以下代码创建一个收缩包装和居中的页面。如果浏览器窗口宽度大于最大潜在宽度，则一切正常。在这种情况下，有三个固定宽度的浮动段落。如果窗口足够宽，使它们都可以浮动在同一条线上，则div将正确居中并缠绕。但是，当浏览器更窄，其中一个段落换行到下一行时，div将扩展到窗口的整个宽度，不再收缩换行。我已经尝试了我能想到的一切，除非有人有新的想法，否则我将放弃并继续前进。奇怪的是，它在ie7中运行良好。算了吧 <!doctype html> <head> <style
<!doctype html>
<head>
<style type="text/css">
header, footer, nav, section, article { display: block; }
body
{
font-size:1em;
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#000;
background:#ddd url(images/BG.jpg);
}
/*********** Start shrink wrapped and centered layout styles ************************/
#page {
position:relative;
overflow:hidden;
}
#container {
float:left;
position:relative;
left:50%;
}
#content
{
float:left;
position:relative;
right:50%;
}
/*********** End shrink wrapped and centered layout styles ************************/
#content
{
border:solid 4px #bbb;
}
p
{
width:20em;
background-color:red;
float:left;
}
</style>
<body>
<div id="page">
<div id="container">
<div id="content">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
</div>
</div>
</body>
</html>
页眉、页脚、导航、节、文章{display:block；}
身体
{
字号：1em；
保证金：0；
填充：0；
字体系列：Verdana、Arial、Helvetica、无衬线；
颜色：#000；
背景：ddd网址（images/BG.jpg）；
}
/***********开始收缩包装和居中布局样式************************/
#页面{
位置：相对位置；
溢出：隐藏；
}
#容器{
浮动：左；
位置：相对位置；
左：50%；
}
#内容
{
浮动：左；
位置：相对位置；
右：50%；
}
/***********末端收缩包装和居中布局样式************************/
#内容
{
边框：实心4px#bbb；
}
P
{
宽度：20em；
背景色：红色；
浮动：左；
}
p1
p2
p3
p {width:200px; height:20px; background:salmon; float:left; margin:10px; padding:10px;}
div {background:lightblue; overflow:auto; width:720px; margin:0 auto;}
@media screen and (max-width: 720px) {
div{width:480px;}
}
@media screen and (max-width: 480px) {
div{width:240px;}
}
要使显示：内联块和居中工作，您需要在父容器上设置文本对齐：居中您可以尝试使用
diplay:inline块float