难以使DIV元素居中

时间:2016-08-18 21:24:06

标签: javascript jquery html css centering

这是我的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 个答案:

答案 0 :(得分:0)

您可以将绝对定位元素水平居中,向左添加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>

请参阅此article on CSS-tricks

transform: translate(-50%, -50%);也是可能的,但负边距与旧浏览器更兼容。

答案 1 :(得分:0)

删除“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;}

答案 2 :(得分:0)

因为你绝对定位它。 要移动它,请使用topbottomleftright。将它们全部设为0。

试试这个:

&#13;
&#13;
jQuery("#infor").delay(4000).fadeOut("slow");
&#13;
.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;
}
&#13;
<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>
         
&#13;
&#13;
&#13;

答案 3 :(得分:0)

查看here以获取有关div {display:table},居中等的更多信息。

&#13;
&#13;
jQuery("#infor").delay(4000).fadeOut("slow");
&#13;
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;
}
        
         
&#13;
<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>
&#13;
&#13;
&#13;