我有一个div标签,宽度设置为800像素。当浏览器宽度大于800像素时,它不应该拉伸div,但应该将它带到页面的中间。
当前回答
.middle {
margin:0 auto;
text-align: center;
}
/*它把div放到中心*/
其他回答
如果你有一些常规的内容,而不是只有一行文本,我所知道的唯一可能的原因是计算空白。
这里有一个例子:
HTML
<div id="supercontainer">
<div id="middlecontainer">
<div class="common" id="first">first</div>
<div id="container">
<div class="common" id="second">second</div>
<div class="common" id="third">third</div>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
}
.common {
border: 1px solid black;
}
#supercontainer {
width: 1200px;
background: aqua;
float: left;
}
#middlecontainer {
float: left;
width: 104px;
margin: 0 549px;
}
#container {
float: left;
}
#first {
background: red;
height: 102px;
width: 50px;
float: left;
}
#second {
background: green;
height: 50px;
width: 50px;
}
#third {
background: yellow;
height: 50px;
width: 50px;
}
因此,#supercontainer是你的“整个页面”,它的宽度是1200px。
# middlecontaintainer是你的网站内容的div;宽度为102px。在已知内容宽度的情况下,您需要将页面大小除为2,并从结果中减去内容宽度的一半: 1200 / 2 - (102 / 2) = 549;
是的,我也看到这是CSS的严重失败。
位置:绝对,然后顶部:50%和左侧:50%将顶部边缘置于屏幕的垂直中心,左侧边缘置于水平中心,然后通过将margin-top添加到div高度的负数,即-100将其向上移动100,同样,margin-left也是如此。这使得div正好位于页面的中心。
# outPopUp { 位置:绝对的; 宽度:300 px; 身高:200 px; z - index: 15; 上图:50%; 左:50%; Margin: -100px 00 -150px; 背景:红色; } < div id = " outPopUp " > < / div >
为了让它在ie6中也能正常工作,你必须这样做:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
没有指定div宽度的定心:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
这有点像<center>标签,除了:
所有直接内联的子元素(例如。<h1>)的<center>也将定位到居中 根据浏览器默认值,内联块元素可以有不同的大小(与display:block设置相比)
Div在父元素中垂直和水平居中,不固定内容大小
在这个页面上有一个很好的概述,有几个解决方案,太多的代码在这里分享,但它显示了什么是可能的…
就我个人而言,我最喜欢这个著名的转换转换-50%技巧的解决方案。它适用于固定(%或px)和未定义的元素高度和宽度。 代码非常简单:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome*/
-o-transform: translate(-50%, -50%); /* Opera */
transform: translate(-50%, -50%);
/* optional size in px or %: */
width: 100px;
height: 100px;
}
这里有一把小提琴,展示了它的工作原理
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?