Yes, there are other questions on this; but I'm not able to make this div center by following their instructions. Why?
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<div class="center"></div>
</div>
</body>
</html>
CSS:
body {
line-height: 1;
}
.center {
position: fixed;
display: block;
margin-left: auto;
margin-right: auto;
width: 300px;
}
Change the position:fixed; to position:relative;
The position: fixed makes the div position itself absolutely (and fixed, making it stay where it is when you scroll). This means that auto-margin won’t work. You can either fix this by removing the position rule, or by positioning the div absolutely instead:
.center {
position: fixed;
width: 300px;
left: 50%;
margin-left: -150px;
}
On an unrelated note, the additional div is completely useless, you can just leave that out. Also, divs are block elements by default, so you can leave out the display: block; rule as well.
Remove the position: fixed from the divs style.
Also, you don't need the display: block... it should default to that anyway. And poke is correct, you shouldn't need that extra div.
Here's an example of it working...
http://jsfiddle.net/VYmw6/1/
Your div won't get centered because you've got position:fixed, if you remove that it will work. :)
See JSfiddle here: http://jsfiddle.net/6XWMR/
is there any reason why you used position: fixed? but the anyway hope this help you
css:
.center {
margin: 0 auto;
width: 300px;
}
Demo
Use it !
.center {
margin-left: auto;
margin-right: auto;
width: 300px;
}
or
.center {
margin:0 auto;
width: 300px;
}
Here is Fiddle !!
Change your code to
<center>
<div>
content
</div>
</center>
Basically, enclose the div which you want to centered inside the tag.
Hope this helps and all the best with your project :-)
Related
Im trying to move a div inside another div down a bit, but when I use
margin-top: 10px;
It makes a white gap at the top. Heres the html:
<div id="topb">
<div id="selection">
</div>
</div>
And heres the CSS:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
margin-top: 40px;
}
And heres a screenshot of the website:
For this, you can use position: absolute. Here is the code:
#topb {
background: url(images/tomato-background.jpg) no-repeat fixed;
background-size: cover;
height: 100%;
width: 101%;
margin-left: -10px;
}
#selection {
background-color: #4d4d4d;
width: 60%;
height: 500px;
margin: auto;
position: absolute;
top: 40px; /*This is where it is changed as well as the line above*/
}
Hope it helps! I think padding would still leave a background, so this is a better idea.
maybe you can modify the parent element by adding padding-top:10px; instead of modifying the child.
This is a "collapsed margin" problem.
It has been answered in this question :
Why would margin not be contained by parent element?
You would have to change the parent div to either (1) add a border, (2) position absolute, (3) display as inline-block, (4) overflow auto.
Refer to the posted link for more detail.
Here is the working fiddle Hope it may help.
position:absolute;
position:relative;
This is because when you have a block element (display: block) inside another block element, the margins will collapse. It will only be considered the largest margin.
So, in your example it will only consider one of the margins (40px).
See reference about collapsing margins.
There are a few workarounds. Choose any:
using padding instead of marginfor the component inside.
Change display type. e.g. display: inline-block.
Use absolute positioning.
Remove margin-top style in #selection, and apply padding-top to #topb
I am trying to make a layout where the navigation sits in a div on top of an image. Im using z-index to do this. I tried making the image a background image but I couldnt get it to scale properly when changing the size of the browser window.
The z-index seems to be working properly but now my div that would contain the nav no longer floats right.
Anyway to fix this?
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
}
#container{
width: 100%;
height: 1000px;
background-color: yellow;
position: relative;
}
#blue{
margin-top: 20%;
width: 50%;
height: 10%;
background-color: blue;
float: right;
position: absolute;
z-index: 10;
}
#test_image{
width: 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="container">
<img id="test_image" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/test_zpsfbvzo3ij.jpg">
<div id="blue"></div>
</div>
</body>
since you use position:fixed; instead of float:right; use:
right: 0;
To make your image responsive the easiest way is to set it do the desired element as a background-image using:
background: url(yourBGimage.jpg) 50% / cover;
Not sure why you use overly the fixed but here's just an example to reflect the above lines (and without the z-index stuff): jsBin demo
For the background as an image approach did you tried?
background-size: cover;
I have an element which is an image within a div id. I am going to make this page a under construction page. I made the div with a "margin: auto" css command. What is away vertically that I can have the div auto center to any browser accessed by the site?
New to this don't know how to do the whole JSFiddle thing lol
Heres a url too: http://nerissagrigsby.com/?page_id=5
My CSS:
#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}
My HTML:
<body>
<div id="openpagesig">
<img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
/>
</div>
<!-- Open Page Signature -->
</body>
Have you tried the following CSS:
.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
position: absolute; /* or "fixed" */
/* The element you want to place in the middle of the page
center should have explicitly defined dimensions: */
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px; /* offset back at exactly half height of the element */
left: 50%;
margin-left: -50px; /* offset back at exactly half width of the element */
}
Here's a working example.
Do I need to mention, that this works even in Internet Explorer 5.5! ... but I doubt this browser is still relevant to anyone.
Please refer to the image below to see how the negative margins help:
Try something like:
.centeredDiv {
width:17em;
height:9em;
position:absolute;
left:50%;
top:50%;
margin:-135px 0 0 -155px;
padding:1em;
background-color:#fffff7;
opacity:0.67;
filter:alpha(opacity=67); /* for IE8 and earlier */
border:2px solid #191919;
}
Obviously editing measurements and colours to suit.
The problem you're having is related to vertically aligning div elements on a page. This is a common problem in HTML and CSS coding.
One solution is to have a container element within an outer div tag. The outer div should be set to display: table; and position: fixed; with 100% width and height as well. Set the inner div to display: table-cell; with the vertical-align: middle; property.
Furthermore, the outer div should have text-align: center; in order to center its child elements.
Here is the code you need:
.outer {
display: table;
height: 100%;
width: 100%;
text-align: center;
position: fixed;
}
.container {
display: table-cell;
vertical-align: middle;
}
An example from jsbin:
http://jsbin.com/otolot/1/
Try resizing the window to see that this works.
Personally I use something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="container">
<div class="container-content">
<div class="content">
<img src="//placehold.it/803x283" />
</div>
</div>
</div>
</body>
</html>
<style>
html, body {
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
margin: auto;
}
.container-content {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.container-content > .content {
max-width: 803px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
</style>
This solution works very nicely, because not only does it vertically center the content, but if the browser windows height is too small to display it all, you can still scroll to see all of the content which is one of the major drawbacks of using other methods.
Example:
http://jsbin.com/owayec/2/
I want to layer background images so I can get a nice effect with borders.
I think my code is simple enough, but the problem I am having is that the tags don't want to expand correctly. I'll explain more later. Here's the html:
<!doctype html>
<html>
<head>
<title>My blog</title>
<link rel="stylesheet" type="text/css" href="webdev.css"/>
</head>
<body class='body'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</body>
</html>
The stylesheet:
.body
{
min-height:100%;
width:100%;
margin-top:0px;
overflow: hidden;
display: inline-block;
display: block;
}
.outer
{
min-height:100%;
width:100%;
overflow: hidden;
display: inline-block;
display: block;
}
.inner
{
min-height:100%;
width:100%;
}
I am not 100% sure the clearfixes are necessary yet. Basically I want the divs to all encapsulate the entire screen no matter what the screen size. Thanks for any and all responses. If I'm not clear feel free to comment and I will explain more, but I think the question is fairly basic.
Try this:
body
{
height:100%;
}
.outer
{
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
.inner
{
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
Making the width 100% is as simple as setting "width: 100%", the height is a bit harder..
You need to have "height: 100%" on both the <html> and <body>-tag.
And then "height: auto; height: 100%; min-height: 100%;" on your <div>'s
The reason that you have two "height" is because IE6 don't understand the "height: auto" and then needs the "height: 100%" instead.
You can see an example of this here: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html
I want to be able to center a div in the middle of a page but can't get it to work. I tried float: center; in css but it doesn't seem to work.
There is no float: center; in css. Use margin: 0 auto; instead. So like this:
.mydivclass {
margin: 0 auto;
}
You can do it inline like this
<div style="margin:0px auto"></div>
or you can do it via class
<div class="x"><div>
in your css file or between <style></style> add this .x{margin:0px auto}
or you can simply use the center tag
<center>
<div></div>
</center>
or if you using absolute position, you can do
.x{
width: 140px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -70px; /*half the size of width*/
}
Try margin: 0 auto, the div will need a fixed with.
If for some reason you have position absolute on the div, do this:
<div class="something"></div>
.something {
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
if you are using width and height, you should try margin-right: 45%;... it is 100% working for me.. so i can take it to anywhere with percentage!
Give the DIV a specific with in percentage or pixels and center it using CSS margin property.
HTML
<div id="my-main-div"></div>
CSS
#my-main-div { margin: 0 auto; }
enjoy :)
Simple solution:
<style>
.center {
margin: auto;
}
</style>
<div class="center">
<p> somthing goes here </p>
</div>
Try Online