[英]Having trouble centering a DIV element
這是我的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");
我似乎無法將此代碼集中在我的網站上...任何想法?
您可以將絕對定位元素水平居中,向左增加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>
請參閱有關CSS-tricks的這篇文章 。
transform: translate(-50%, -50%);
也可以,但負邊距與舊瀏覽器更兼容。
刪除“position:absolute;” 從您的CSS和添加中心標簽
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;}
因為你絕對定位它。 要移動它使用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>
在這里查看有關div {display:table},居中等的更多信息。
jQuery("#infor").delay(4000).fadeOut("slow");
html,body{ /*it for .div-table, to calculate page height and width, but you can also change for any element which inherit (before) of .div-table*/ height:100%; width:100%; } .div-table{ width:100%; height:100%; display:table; } .div-center{ display: table-cell; vertical-align: middle; } .streamStartingSoon{ width: 250px; height: 30px; background-color: #65d1d4; opacity:0.9; text-align: center; line-height: 30px; border-radius: 5px; margin:0px auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Stream starting soon alert popup --> <div class="div-table"> <div class="div-center"> <div class="streamStartingSoon" id="infor"> <font color="white"><strong>Stream will begin shortly!</strong></font> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.