buhtla Posted June 11, 2014 Share Posted June 11, 2014 Hey guys, I have renderer which is smaller than browser window size.I want to center it in the middle of the browser window. How can I achieve this? So far I have achieved this with Renderer.view.style.posLeft, but I would like to do it with css only if possible. tetrarkon 1 Quote Link to comment Share on other sites More sharing options...
buhtla Posted June 12, 2014 Author Share Posted June 12, 2014 I just placed centered div on page and apended view to that div, and that worked tetrarkon 1 Quote Link to comment Share on other sites More sharing options...
tips4design Posted June 28, 2014 Share Posted June 28, 2014 margin: 0 auto;Which means 0x top and bottom and 50% of the remaining horizontal space for left and right.Apply this rule to your canvas (renderer view). Quote Link to comment Share on other sites More sharing options...
hubert Posted June 29, 2014 Share Posted June 29, 2014 (edited) the correct way of doing it is very simple. What you have to do is to set you canvas to position fixed. Center it both top and left with 50% and use negative margins. NEGATIVE MARGINS ARE A STANDARD ACCEPTED BACK IN THE TIMES OF IE5 AND THEY WILL WORK ON ALL BROWSERS!!! THE CODE: <HTML> <body> <style> #test { border: 1px solid red; position: fixed; top: 50%; left: 50%; margin-top: -125px; ; } </style> <canvas id="test"></canvas> <script> var canvas = document.getElementById('test'); var _renderer = PIXI.autoDetectRenderer(400, 250, canvas, false, true); var stage = new PIXI.Stage(0x000000); </script> </body> </HTML>add ; for some strange reason the forums code editor keeps erasing it... ? o.O or check out this fiddle that i have prepared! This is a jsFiddle http://jsfiddle.net/Sa4fe/ http://www.sevenative.com Edited June 29, 2014 by hubert Quote Link to comment Share on other sites More sharing options...
daviestar Posted September 9, 2015 Share Posted September 9, 2015 This is a more flexible approach, but be aware that the browser will need to be IE8+. The advantage here being the only fixed units in the whole lot is the width and height of the game, with the caveat that the container must have a height. You can update those and the rest will react. I added inline styles on the canvas element as well (you can assign dimensions in the CSS or HTML but both is unnecessary), to illustrate the situation where you have a site with multiple games of different dimensions on different pages - you'd just need to add the game's width and height as an inline style to the HTML and the styles can remain universal across all pages.<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Game</title><style>html, body { height: 100%; // Needed if you want to use height: 100% within the body tag background: black; font-size: 14px;}.game-container { height: 100%; // The 'html, body' styles above can be removed if you want to use a fixed height here (ie. 800px) text-align: center; // Horizontally align text elements to centre font-size: 0; // Remove whitespace between elements (ie. a space between a word)}.game-container:after { // Create a pseudo-element after 'game-container' div content: ''; // Required attribute of pseudo-element width: 0; // Force it to have no width height: 100%; // Make full height of container}.game-container .game { width: 600px; // Your game width height: 400px; // Your game height background: white;}.game-container:after, .game-container .game { display: inline-block; // Force these elements to behave like text, but allow width and height vertical-align: middle; // Vertically align text WITH OTHER TEXT SIBLINGS (hence the pseudo-element) font-size: 1rem; // Set font-size back to 14px (will only work if font-size is assigned to the root 'html' element)}</style></head><body><div class="game-container"> <canvas class="game" style="width: 600px; height: 400px;"></canvas></div></body></html>To get this technique to work with older browsers, you can just replace the pseudo-element with a real element:<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Game</title><style>html, body { height: 100%; background: black; font-size: 14px;}.game-container { height: 100%; text-align: center; font-size: 0;}.game-container .align { // Change to a real element width: 0; height: 100%;}.game-container .game { width: 600px; // Your game width height: 400px; // Your game height background: white;}.game-container .align, .game-container .game { *display: inline; // Hack for IE7 and below - elements need to be inline before they can be made inline-block display: inline-block; vertical-align: middle; font-size: 1rem;}</style></head><body><div class="game-container"> <span class="align"></span> <div class="game" style="width: 600px; height: 400px;"></div></div></body></html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.