我正在开发移动应用程序。我有饼图和条形图，如何在浏览器窗口的中心放置固定大小的DIV。如果调整了浏览器的大小，我希望DIV调整其位置。我尝试过的 实际上是它的“ R图”
<div id="output" ><canvas id="cvs" width="350" height="350" >[No canvas support]</canvas></div>
<script>
$(document).ready(function ()
{
var pie = new RGraph.Pie('cvs', [45,20,25,10])
.set('colors', ['#F00', '#F00','#666','#ccc'])
.set('events.click', myEventListener)
.set('events.mousemove', function (e, piechart) {e.target.style.cursor = 'pointer';})
.set('title.y', 30)
.set('key', ['sunday','monday','tuesday','wednesday'])
.set('key.colors', ['#f00', '#f00','#666','#ccc'])
.set('key.interactive', true)
.set('key.position', 'gutter')
.set('gutter.left', 45)
.set('key.position.y', 315)
.set('key.rounded', false)
.set('radius', 100)
.set('linewidth', 1)
.draw();
})
</script>
<style>
#output {
width: 350px;
height: 350px;
background-color: none;
position: absolute;
top:0;
bottom: 40%;
left: 0;
right: 0;
margin: auto;
}
</style>
工作示例：http : //jsfiddle.net/Gajotres/8kXWV/
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<img src="http://images5.fanpop.com/image/photos/29500000/GamesRadar-Puppy-puppies-29566786-200-200.jpg" alt="image"/>
</div>
</div>
function center(){
w=$(window).width();
h=$(window).height();
img_w=$('img').width();
img_h=$('img').height();
pos_top=(h-img_h)/2;
pos_left=(w-img_w)/2;
$('img').css({'top':pos_top,'left':pos_left+'px', position: "absolute"});
}
$(document).on('pageshow', '#index', function(){ center(); });
$( window ).on( "orientationchange resize", function( event ) {
center();
});
.ui-content {
position:absolute;
top:40px;
right:0;
bottom:0;
left:0;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句