我有一个div标签,宽度设置为800像素。当浏览器宽度大于800像素时,它不应该拉伸div,但应该将它带到页面的中间。
当前回答
body, html {
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.container .box {
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
http://jsfiddle.net/NPV2E/
“body”标签的“width:100%”仅为示例。在实际项目中,您可以删除此属性。
其他回答
Flexbox解决方案是2015年的发展方向。Justify-content: center用于父元素将内容对齐到它的中心。
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
输出
.container { 显示:flex; justify-content:中心; } .center { 宽度:400 px; 填充:10 px; 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; } < div class = "容器" > <div class="center"> div居中,文本左对齐 < / div >
出于某种原因,之前的答案对我都不起作用。这对我来说很管用,而且在不同的浏览器中也同样适用:
.center {
text-align: center;
height: 100%;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
}
位置:绝对,然后顶部: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 >
<body>
<div style=" display: table; margin: 250 auto;">
In center
</div>
</body>
如果你想改变垂直位置,改变250的值,你可以根据你的需要安排内容。不需要给出宽度和其他参数。
没有指定div宽度的定心:
body {
text-align: center;
}
body * {
text-align: initial;
}
body div {
display: inline-block;
}
这有点像<center>标签,除了:
所有直接内联的子元素(例如。<h1>)的<center>也将定位到居中 根据浏览器默认值,内联块元素可以有不同的大小(与display:block设置相比)
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?