我有一个网站,我在网站上的div是垂直和水平居中。它的当前内容是25,因此居中工作水平。如果我改变内容,我必须编辑width
到它的宽度和margin-left
到宽度的一半。随着内容的变化,每次你进入网站,这将不起作用,我需要一个解决方案。
我该如何修复它?我是否可以检测文本的宽度并设置width
&margin-left
与js或jQuery?
#output {
position: absolute;
top: 50%;
margin-top: -160px;
color: #6FA673;
font: 200pt Aleo;
font-weight: bold;
left: 50%;
width: 296px;
margin-left: -148px;
}
谢谢!
编辑:这是给你们的JSFiddle !数字25的效果很好,但其他地方会有点偏离垂直。
JSFiddle !
我刚刚看到了你的jsfiddle,同时我用HTML/CSS做了一些东西,试图找出你所寻找的(对我来说类似于灯箱:))
http://codepen.io/anon/pen/dgKls从你的jsfiddle这个吗?http://jsfiddle.net/b4TTK/13/
#output, html, body {
height:100%;
width:100%;
margin:0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
text-align:center;
}
#output {
position: absolute;
color: #6FA673;
font: 200pt Arial;
font-weight: bold;
line-height:0
}
不流畅
你说…
如果我改变内容,我必须将宽度编辑为它的宽度和
…不,你不需要这么做。你只需要一个更好的CSS解决方案。另一种方法是简单地将内容居中,无论文本内容是长是短。然后你就不必担心编写js代码来检测它的css属性…
CSS:
#output {
position: relative;
top: 50%;
margin:0 auto;
text-align:center;
color: #6FA673;
font: 200pt Arial;
font-weight: bold;
}
和我的小提琴
你可以用一个简单的jquery方法让元素在页面加载时垂直对齐…
JS:
var mtop = $(window).height()/2;
$('#output').css({top: mtop});
如果您唯一关心的是左距需要是容器宽度的1/2,您可以使用以下命令:
$('#output').css('marginLeft', '-'+$('#output').width() /2+'px');
当然还有
width: auto;