[英]How to center align a glyphicon to the middle of the page at all screen sizes
I have a glyphicon that i have to align in the middle of the page at all times no matter what screen size it displays on how would i achieve this and where am i going wrong? 我有一个glyphicon,无论它显示在什么屏幕尺寸上,我都必须始终对齐页面的中间,我将如何实现此目标以及在哪里出错?
HTML 的HTML
<div id='overlay'>
<div class="container">
<div class="middle-loading-box">
<div class="center-block">
<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
</div>
</div>
</div>
</div>
CSS 的CSS
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
.middle-loading-box .div.center-block .glyphicon{
margin: 0 auto;
}
.middle-loading-box{
border: none;
width: 38px;
height: 36px;
margin: 0 auto;
display: block;
text-align:center;
padding-top:1px;
}
.glyphicon-refresh:before ,.glyphicon-refresh:after{
color: orange;
font-size: 30px;
text-align:center;
}
JQUERY JQUERY
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.7,
'position': 'absolute',
'top': 0,
'left': 0,
'background': '#000000',
'width': '100%',
'z-index': 5000
});
});
Add 加
position: fixed;
top: 50%;
left: 50%;
margin-top:-16px;
margin-left:-16px;
to .middle-loading-box
到
.middle-loading-box
http://jsfiddle.net/f709psLh/2/ http://jsfiddle.net/f709psLh/2/
Is this what you're looking for? 这是您要找的东西吗?
http://css-tricks.com/centering-in-the-unknown/ http://css-tricks.com/centering-in-the-unknown/
Maybe a simpler solution : 也许是一个更简单的解决方案:
.glyphicon {
position: absolute;
top:50%;
}
Another solution is to use display: table
like this: 另一个解决方案是使用
display: table
如下所示:
js js
$(function () {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity': 0.7,
'position': 'relative',//change position to relative
'top': 0,
'left': 0,
'background': '#000000',
'width': '100%',
'z-index': 5000,
'display': 'table'// add display table
});
});
css 的CSS
.container {
display: table-cell;/*Add display table cell*/
vertical-align: middle;/*Add vertical align middle*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.