垂直对齐不适用于Chrome
MatíasCánepa
我有这个简单的标记和CSS以垂直对齐框
可以正常运行，并且可以在FF中正常运行，但在Chrome上却无法使用。关于这种情况为什么发生以及如何解决的任何想法？
HTML：
<div id="container">
<div id="box"></div>
</div>
CSS：
#container
{
position: fixed;
top: 25px;
right: 25px;
bottom: 25px;
left: 25px;
border: 1px solid red;
}
#box
{
height: 150px;
margin: -75px auto 0;
position: relative;
text-align: center;
top: 50%;
width: 75%;
border: 1px solid blue;
}
内容： http : //jsfiddle.net/5fLr00tf/
Firefox输出：
Chrome输出：
Praveen Kumar Purushothaman
你忘了添加position: absolute;的#box，你也忘了给left: 12.5%;，这是需要水平居中：
#box {
height: 150px;
margin: -75px auto 0;
position: relative;
text-align: center;
top: 50%;
left: 12.5%;
width: 75%;
border: 1px solid blue;
position: absolute;
}
小提琴：http : //jsfiddle.net/3ya0ewky/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
垂直对齐不适用于div
- 2
为什么我的文本对齐和垂直对齐不适用于图像？
- 3
垂直对齐中心不适用于 div 文本对齐
- 4
垂直对齐不适用于嵌入式块
- 5
垂直对齐包装器div不适用于多行文本
- 6
垂直对齐中间不适用于h2和img标签
- 7
溢出隐藏不适用于“垂直对齐的底部” - 绝对定位的外部 div 中的 div
- 8
Bootstrap 4 垂直对齐中心不适用于 flex 布局
- 9
文字对齐不适用于Chrome
- 10
垂直对齐适用于应用于或其他行内块元素的元素吗？
- 11
文本对齐：对齐；不适用于wkhtmltopdf
- 12
AddFavorite JS不适用于Chrome
- 13
localStorage不适用于Google Chrome
- 14
jQuery动画不适用于Chrome
- 15
Highchart不适用于Google Chrome
- 16
SignalR不适用于Google Chrome
- 17
转换TranslateX不适用于Chrome
- 18
剪贴路径不适用于chrome
- 19
Highchart不适用于Google Chrome
- 20
jQuery单击不适用于Chrome
- 21
语音识别不适用于Chrome
- 22
Autocomplete=off 不适用于 Chrome
- 23
用于EditText的ActionNext不适用于对齐/快速滚动
- 24
NSAttributedString对齐方式不适用于html内容
- 25
div对齐不适用于带有菜单的标题
- 26
文本对齐中心不适用于内联块
- 27
垂直滚动不适用于Mobile Safari
- 28
垂直菜单扩展不适用于动态内容
- 29
<input type =“ range”>垂直样式不适用于拇指
我来说两句