how can i set div position at the center of the page with size, for example, 80%/80%.
UPD: margin: 0 auto; works, but only for horizontal alignment. And i also need vertical.
This page talks about some different ways to achieve vertical centering using css. I've used method 2 before with success but I consider all of these a hack at best.
Set a fixed width and auto-margins.
<style type="text/css">
#center {
width:300px;
margin-left:auto;
margin-right:auto;
}
</style>
<body>
<div id="center"></div>
</body>
This does what you want, but it is not pretty.
<div style="margin: 0 auto;width:80%;height:80%;">
This will probably not work for you however because you did not provide code
</div>
Related
I'm creating a portfolio and want to know how I can make it center itself on the browser page. The link to it is
http://optiq-portfolio.zxq.net/portfolio.html
I tried adding
margin-left:0 auto;
margin-right:0 auto;
to the body in css, but that's not working. How can I fix this?
There's more to it than just that. You need to define a wrapper div, set the width on that, and then use margin: 0 auto
For instance, if you had your body defined with width:1000px; it'll already be centered. Of course, this messes up the rest of your stuff.
margin-left: 0 auto isn't valid also.
You don't want to add margins to your body, the proper way to handle this is to have a container element with margin: 0px auto; text-align:left;. On your body element you will want text-align:center;.
The rest of your code should be contained within the container element.
This will center your page in most modern browsers.
As others have said, you need to create a wrapper container so that it encloses your main content. Then specify a fixed width and automatic horizontal margins with CSS. David Walsh has a nice explanation of this in his blog post Horizontally Center Your Website Structure Using CSS.
HTML
<html>
<head>
<title>My Site</title>
</head>
<body>
<div id="wrap">
<!-- WEBSITE GOES HERE -->
</div>
</body>
</html>
CSS
#wrap {
width: 900px;
margin: 0 auto;
}
margin-left: 0 auto; and margin-right: 0 auto; are not valid CSS properties.
You can do something like margin:0 auto; which will set top and bottom to 0 and left and right to auto.
I have a wrapper div element that contains a div that in turns contains divs inside; these divs are added or removed at runtime. The HTML and CSS look like this:
<div id="Wrapper">
<div class="InnerGreen">
<div class="InnerContent"></div>
<div class="InnerContent"></div>
</div>
</div>
#Wrapper{
width:600px;
height:50px;
margin:10px 20px;
background:blue;}
.InnerGreen{
background:green;
margin:10px auto; // this doesn't center
overflow:hidden;
display:inline-block;}
.InnerContent{
background:yellow;
height:30px;
width:40px;
float:left;
margin:3px 5px;}
I'm using inline-block to wrap the .InnerGreen inside the Wrapper; however, the margin:auto don't seem to horizontally center the div. Of course, this works if I define the width of .InnerGreen but in reality, the .InnerContent divs are a collection of divs of all different sizes so I can't set the width of .InnerGreen at runtime.
How can I make the margin:auto work? Here the the jsfiddle.
Thanks for your suggestions.
Inline elements have no margins. By telling .InnerGreen to act as inline-block, you're essentially telling it to act as inline with regards to positioning. On the other hand, you can still center it using text-align:
#Wrapper {
text-align: center;
}
See updated JSFiddle.
This may not technically be the right way of doing it, but you could put text-align:center on your wrapper div.
As far as i know, without being able to determine the width of the element, you cant use the margin:auto method. It isn't exactly elegant, but you can accomplish this with a centered table:
<center>
<table>
<tr><td align="center">
<div>This will be centered.</div>
</td></tr>
</table>
</center>
with your code:
http://jsfiddle.net/MaxPRafferty/yA7Nm/
You could just center the div using jquery, something along the lines of...
<script type="text/javascript">
$(function() {
var containerWidth = $(".InnerGreen").width();
$(".InnerGreen).css("width", containerWidth);
});
</script>
Your CSS setting for the margin should then do the rest.
You may also want to add height: auto to your style, as if you are adding internal content at runtime, it will better control the growth of the element.
I don't know if this is possible with only html and css, but I have an absolute div inside a relative container and want to have a regular div under the container.
HTML:
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
CSS:
#container{
position:relative;
overflow:auto;
}
#content{
position:absolute;
width:955px;
z-index:1000;
}
The goal is to prevent the "content" div from overlapping into the footer. It worked with overflow:auto, but I got another vertical scrollbar appearing for the container div.
Any other ways to get around this?
So, how about hiding only vertical scrollbar:
#container {
position: relative;
overflow: auto;
overflow-y: hidden;
}
?
If you're looking for something more fancy to hide scrollbars then you could use JavaScript mousescroll event to do it.
http://viralpatel.net/blogs/2009/08/javascript-mouse-scroll-event-down-example.html
Or you could use some jquery plugin to handle scrollbars, there are plenty of them, jScrollpane, Scrollable...
It is possible to do this with only HTML and CSS. You may find the setup of the HTML and CSS code from http://www.cssstickyfooter.com/ useful since it is using the same layout as your code and it trying to achieve a similar goal.
I have combined the code used to create a sticky footer with your code in the Fiddle below:
http://jsfiddle.net/bPybY/1/
You'll have to change the layout differently since element with absolute position doesn't have a layout space. Like this:
<html>
<head>
<style>
#container{
position:relative;
}
#absoluteContent{
position:absolute;
width:955px;
z-index:1000;
}
</style>
</head>
<body>
<div id="container">
<div id="absoluteContent">
<div id="content">content
</div>
<div id="footer">footer
</div>
</div>
</div>
</body>
</html>
I'm trying to center a pdf file in the middle of my web page, but it's not letting me set the margin's to 0 auto, like it does for normal content.
I can achieve this with absolute positioning, but why is the normal margin property not working?
<html>
<style>
#ob{
width:800px;
height:800px;
}
#wrapper{
margin:0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</div>
</body>
</html>
Whatever you are trying to center using the margin technique needs to have a width defined.
Try setting a width for the wrapper, or simply apply the margin:0 px to #ob
Give the wrapper a width, thats why its not centering i doesont know what to be compared in the center
#wrapper{
margin:0 auto;
width: 800px;
}
Use
text-align:center;
Here's a jsFiddle example.
You're centering the wrapper, which will be 100% width, so already centered. Move the margin code to the object and try again.
Just replace your style tag to this one and it will solved your problem, for details please look into the comments that I wrote inside the code.
<style>
#wrapper{
width: 800px; // It will set the width of the wraper
margin: 0 auto; // It will help the wrapper div to be centered of the document.
}
#ob{
width: 100%; // It will be streched upto the wrapper fixed width which is 800px
height: 800px;
}
</style>
try this:
<div id="wrapper">
<center>
<object id="ob" class="pdf" data="my_pdf_file.pdf" type="application/pdf">
Your browser does not support PDFs
</object>
</center>
</div>
like:
<body>
<div></div>
<div></div>
</body>
How can I make all the DIVs at the center of the webpage?
I mean in the browser.
HTML:
<div class="center"></div>
CSS:
div.center { margin: 0 auto; }
Of course, if you have other things outside of those divs, they might interfere.
Depends on the exact page, but either text-align: center or margin: 0 auto will probably be what you need. See CSS Centering for general information about centering and CSS Selectors so you know how to target the proper elements.
Either create a CSS class or put a style in your DIV element:
margin:0px auto;