在将DIV元素居中时出现问题
在将DIV元素居中时出现问题
提问于 2016-08-19 05:24:06
这是我的JSFiddle https://jsfiddle.net/xdmns7e4/
HTML：
<!-- Stream starting soon alert popup -->
<div class="streamStartingSoon" id="infor">
<font color="white"><strong>Stream will begin shortly!</strong></font>
</div>CSS：
.streamStartingSoon{
width: 250px;
height: 30px;
background-color: #65d1d4;
opacity:0.9;
text-align: center;
vertical-align: middle;
line-height: 30px;
position: absolute;
top: 250px;JS：
jQuery("#infor").delay(4000).fadeOut("slow");我似乎不能让这些代码集中在我的网站上...有什么想法吗？
回答 4
Stack Overflow用户
发布于 2016-08-19 05:29:53
您可以将绝对定位的元素水平居中，方法是在左侧加上50%减去元素宽度的一半(高度也是如此)：
.streamStartingSoon {
left: 50%;
margin-left: -125px; /* Half the width */
}完整代码：
jQuery("#infor").delay(4000).fadeOut("slow");.streamStartingSoon {
width: 250px;
height: 30px;
background-color: #65d1d4;
opacity: 0.9;
text-align: center;
vertical-align: middle;
line-height: 30px;
position: absolute;
top: 50%;
margin: auto;
border-radius: 5px;
left: 50%;
margin-top: -15px; /* Half the height */
margin-left: -125px; /* Half the width */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Stream starting soon alert popup -->
<div class="streamStartingSoon" id="infor">
<font color="white"><strong>Stream will begin shortly!</strong></font>
</div>
transform: translate(-50%, -50%);也是可能的，但负边距与旧浏览器更兼容。
Stack Overflow用户
发布于 2016-08-19 05:30:12
从CSS中删除"position: absolute;“并添加Center标签
HTML
<!-- Stream starting soon alert popup -->
<div class="streamStartingSoon" id="infor">
<center><font color="white"><strong>Stream will begin shortly!</strong</font></center>
</div>CSS
.streamStartingSoon{
width: 250px;
height: 30px;
background-color: #65d1d4;
opacity:0.9;
text-align: center;
vertical-align: middle;
line-height: 30px;
/*position: absolute;*/
top: 250px;}Stack Overflow用户
发布于 2016-08-19 05:31:03
因为你的定位是绝对正确的。要移动它，请使用top、bottom、left、right。将它们全部设置为0。
试试这个：
jQuery("#infor").delay(4000).fadeOut("slow");.streamStartingSoon{
width: 250px;
height: 30px;
background-color: #65d1d4;
opacity:0.9;
text-align: center;
vertical-align: middle;
line-height: 30px;
position: absolute;
border-radius: 5px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="streamStartingSoon" id="infor">
<font color="white"><strong>Stream will begin shortly!</strong></font>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39027734
复制相关文章
相似问题
腾讯云开发者
