I have built a WebGL game using Unity, and I put it on a domaine, everything is working fine, but I want to center the game screen in the webpage like in thisimage.
here is the index.html code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Game Title</title>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/WebGL.json");
</script>
</head>
<body style="background-color:black;">
<div id="gameContainer" style="width: 1024px; height: 576px; margin: auto "></div>
</body>
</html>
I found the answer for this i just added a this style to head
<style>
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
</style>
and I put the div gameContainer inside another div with the style above. Not sure if this is the right solution, but it works
I encountered a similar issue, my WebGL build was suddenly left aligned. Found out that I mistakenly changed the WebGL template setting on Player Settings from Default to Minimal. Default is centered aligned.
Related
Is there a way to be able to have HTML / CSS just warp the lines on the same line?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.MYDIV {
overflow-x: auto;
white-space: pre-line;
border: 1px solid #cccccc;
height: auto;
width: 320px;
}
</style>
<body>
<div class="MYDIV">
Look I really just want to be able to write this like this in html.
And have this be on the same line in the browser and wrap. I know
it's weird but it would make my life easier.
</div>
</body>
</html>
What the HTML CSS gives me
What I want without having to write everything in one line.
If this is imposable I can accept that.
Remove white-space: pre-line from your code and it will give you the desired output.
Because when using pre-line lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Also add padding-top: 10px; for the space above the content (I spotted this on the screenshot).
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.MYDIV {
overflow-x: auto;
/*white-space: pre-line;*/
border: 1px solid #cccccc;
height: auto;
width: 320px;
}
</style>
<body>
<div class="MYDIV">
Look I really just want to be able to write this like this in html.
And have this be on the same line in the browser and wrap. I know
it's weird but it would make my life easier.
</div>
</body>
</html>
The solution has already been given, I just want to mention one thing. It's always a good practise to use a paragraph tag for this sort of writing. That will adjust many issues by itself.
So remove white-space: pre-line; and use
<p class="MYDIV">
Look I really just want to be able to write this like this in html.
And have this be on the same line in the browser and wrap. I know
it's weird but it would make my life easier.
</p>
This is surely a good practise to write HTML codes.
I am using Codepen and the textbox should be in the center with a smaller width, but no matter what I add to the .box area of the CSS, it doesn't respond. I can confirm that this isn't a web browser issue as I've tried both Google and Brave
You are using html tag in css. It won't work anymore. Style tag is used when you want to write css in your html file internally. Like this -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 10%;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
But if you write css in a separate file, you needn't use the <style></style> tag. Just write the css like this -
.box {
width : 10%;
text-align : center;
}
And codepen gives you the ability to write HTML, CSS, and javascript separately. So, don't use tag.
i'm running some basic beginner tutorials in order to learn how to properly run html. I've come to the portion where i'm using a div tag in css to center the content. However, once i open the test page, everything stays locked to the right of the browser. I've been scouring the forums for any solution and nothing seems to fix the issue. Tested in Chrome and IE.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h1> My Website </h1>
<p>Learn more about me.</p>
<img src="img/lady.jpg" alt="skyrim">
<h2>My New Section </h2>
</div>
</body>
</html>
Here's the CSS:
a {
color: red;
text-decoration: none;
}
h1 {
font-family: sans-serif;
}
div {
width: 500px;
margin: 0 auto;
background: red;
text-align: center;
}
You have no Doctype. This puts you in Quirks mode (the land of incompatibility).
Add one as the very first thing in your document.
<!DOCTYPE html>
It looks fine in my end:
http://jsfiddle.net/Riskbreaker/JH7NK/
If you mean that extra space you have vertically on top its your h1.
I edited to show you:
div h1 {margin: 0}
You need to add a DOCTYPE. This is an example of the HTML5 DOCTYPE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML here
</body>
</html>
I am relatively new to web development and my school has asked me to create a webpage that will host the school's webshow and I am having trouble centering the embedded video.
I tried adding an inline style margin-left: auto; margin-right: auto; to the embed code but that is not centering it. I can change the margins manually but I want the video to be automatically centered whenever somebody visits the page.
Are auto margins not supported in embed tags?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>
<body>
<div style="background-image:url(img/Stage-Background.png)"; margin-top:100px; margin-bottom: 100px;>
<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" style="margin-left:auto; margin-right:auto;"></embed>
</div>
</body>
</html>
Working simpler example showing margin style being ignored, at least on Chrome:
/* does not center it: */
embed { margin: 0 auto; }
div, embed { border: 1px solid black; }
div { width: 100%; }
<div>
<embed src="https://cdn.sstatic.net/stackexchange/Img/se-logo.png">
</div>
On Windows Chrome that renders as:
In your embed code, try to use the following just before and just after the embed code.
<center>
<embed>
//youtube url here..
</embed>
</center>
or you could use this margin: 0 auto;
I'm building a web app and unfortunately I have a white border around the top and left of the page. I have set the html and body padding and margin to 0px but it doesn't seem to be having any effect on it. Inside of the body is a single iframe and when I preview the site and I go on inspect element it shows that the padding is on the body...
Here is the code - if anyone could take a look that would be great!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>index</title>
<style>
html {
height:100%;
}
body {
background-color: #FFFFFF;
margin: 0px !important;
padding: 0px !important;
height:100%;
}
</style>
<!-- copy these lines to your document head: -->
<meta name="viewport" content="user-scalable=yes, width=320" />
<!-- end copy -->
</head>
<body>
<!-- copy these lines to your document: -->
<div id="index_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
<script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?4823"></script>
</div>
<!-- end copy -->
</body>
</html>
JSFiddle
Try setting the margins of the #my-iframe to a negative number, e.g. -10px:
#my-iframe {
width: 100vw;
height: 100vh;
border: 0;
padding: 0;
margin: -10px;
}
This may cut a small section of the iframed site off, but judging by the look of the site a few pixels off the edge won't do much damage.