I cannot get my site to be centered for the life of me with CSS. I have tried all the usual methods suggested around the web including:
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Then using
<div id="container>
<!-- Centered Content Goes here-->
</div>
But it just wont go to the center. It stays at the left side of the page.
An example of the CSS for the element that I want to be centered is this:
#topHeader
{
background:url(images/top_header.jpg);
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
So, my HTML would look like this:
<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>
But as I mentioned before, the element stays put.
Thanks!
Eric
Try with this
dead centre
The primary issue is the absolute positioning of your #topHeader element. Because you have it absolutely positioned with top: 0px; left: 0px;, that's exactly where it's going to be positioned - at the top left of the page.
Start off by removing the absolute positioning from the #topHeader element.
Try adding this to the top of your css file:
// Wipes out any preexisting padding and margin.
html, body {
padding: 0;
margin: 0;
}
Then add a position: relative; directive to the class you want centered. Actually, try adding it to the html, body one so that all your classes use relative position. It might be that you have position: absolute; set which then combines with the left: 0px; to force your header contain to ignore the margin: 0 auto; and stay on the left of the page.
You're placing the header absolutely so it's being offset from the containing block (i.e. body), not the parent element. What you want is Relative positioning.
absolute
The box's position (and possibly size) is specified with the 'top',
'right', 'bottom', and 'left'
properties. These properties specify
offsets with respect to the box's
containing block. Absolutely
positioned boxes are taken out of the
normal flow. This means they have no
impact on the layout of later
siblings. Also, though absolutely
positioned boxes have margins, they do
not collapse with any other margins.
- 9.3.1 Choosing a positioning scheme: 'position' property
Absolute:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:absolute;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
Relative:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
color:blue;
border:1px solid blue;
width: 770px;
margin: 0 auto;
text-align: left;
}
#topHeader
{
color:red;
border:1px solid red;
position:relative;
width: 695px;
height: 242px;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
outside
<div id="container">
inside
<div id="topHeader">deep inside</div>
<!-- All other elements go here as well-->
</div>
</body>
</html>
One thing to check when trying out all of these methods of centering is to make sure that your doctype is correct for the method that is being used.
Hope this helps for you.
As far as I know it simply doesn't work. text-align centers text or inline content, not block elements.
Edit: On the other hand The Disintegrator's link makes sense. Unfortunately, only for fixed-sized blocks.
Related
I have set a div named header as Absolute so that it is flush to the window.
I then have a content div tag with no position set both are contained in a wrapper div tag
I have set the content div tag to have padding of 100px from top so that contents are not obliterated by the header.
Is there any other way of moving the content under the absolutely positioned header with out the need to use padding or margins?
<div id="wrapper">
<div id="header">
<div id="indent">content of header</div>
</div>
<div id="content">content of page</div>
</div>
CSS
#wrapper {
background-color: #FFF;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 100px;
padding-left: 5px;
clear: both;}
#header {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
right: 0px;
background-color: #FFF;}
#indent {
width: 960px;
margin-right: auto;
margin-left: auto;
position: relative;}
#content {
clear: both;
padding-top: 100px;}
You could use the "top" attribute:
e.g.
.absolute {
position: absolute;
height:20px;
width: 20px;
background-color: #FF00FF;
}
.relative {
position: relative;
top:20px;
height:20px;
width: 20px;
background-color: green;
}
See this fiddle
You would have to set a top margin for the content div, because when you set the header div's position to absolute the following div's will ignore the height of the header div. So the header div height property would have to be static as well.
You could also just set the html body elements margin and padding to 0px and remove the absolute positioning from the header tag, that would also let the header div sit flush with the window.
Having looked at your code, the below will achieve the same effect, unless there is additional content you arent mentioning. I see your use of clear it would help to also let us know if there are other elements present which may interact with the code you posted.
#wrapper {
background-color: #FFF;
padding: 0px 5px 100px 5px;
}
#header {
background-color: red;
text-align:center;
}
#indent {
display:inline-block;
text-align:left;
/* width : xx */
margin 0 auto;
}
From what I can understand, you will want to use relative positioning, not absolute positioning. If you could make the question easier to understand, I could maybe have a better answer.
As a general rule when you have floated content inside an container, the containing container collapses to it;s minimum height and width, depending on your CSS master rules and the type of container, block, inline-block.
In this cases always add a clear property to one container right after the floated content so it won't break your other content.
<div id="wrapper">
<div id="header">
<div id="indent">content of header</div>
</div>
<div class="clear=box"></div>
<div id="content">content of page</div>
</div>
#wrapper { position:relative; }
#header {
position:absolute;
clear:both; /* add this to clear your content */
}
#content { clear:both; /* in case clear:both from above not working */ }
#clear-box { clear:both; /* a container dedicated to clear contentfloat */ }
Some times you can add one dedicated div to clear floating from previous contents. Be reserved with positioning absolutely. Use default elements behavior unless there is no other way and you're forced to use position:absolute.
Let me know if works for you :)
I'm having trouble because I have a div I want to center and what I have
usually been told to do is this:
width: 700px;
margin-left: auto;
margin-right: auto;
the trouble is, this is for if you want the div to be a fixed width. I want the div
to adjust its size based on the text in the div, and still be centered. I tried:
width: auto;
margin-left: auto;
margin-right: auto;
but this didn't work. It stretches the div to fill up the screen when I do this.
Anyone know what to do here?
for parent block or body - text-align:center;
for centerd block- display:inline-block;
.center {
display: inline-block;
background: red;
}
body {
text-align: center;
}
<div class="center">
<p contenteditable="true"> write text </p>
</div>
DEMO http://jsfiddle.net/RXP4F/
Content Editable MDN
have you tried the approach shown here?
http://www.tightcss.com/centering/center_variable_width.htm
basically.
put your content inside a floated div
put that floated div within another floated div
put left: 50%, position relative on outer div
put left: -50%, position relative on inner div
finally, nest everything in one more div with overflow:hidden
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
here is my jsfiddle demonstration:
http://jsfiddle.net/wbhyX/1/
Use margin:
0px auto; and display: table;
There are example:
https://jsfiddle.net/da8p4zdr/
You might want to try CSS display:table-cell or display:table
Try this structure.
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
zloctb's answer on Aug 30 '13 at 4:14 actually worked in principle but was incomplete. If you want your element width to be 'auto' based on the contents within it AND centered within its parent BUT with the contents inside the CHILD element left-aligned, do the following (because it really is the simplest way):
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviously, if you just wanted everything strictly centered, you would not need the code for the child element.)
EDITED:
use table, it could be easier to style. Then add div into the tr
.outer-container {
position: relative;
left: 50%;
float: left;
clear: both;
margin: 10px 0;
text-align: left;
}
.inner-container {
background: red;
position: relative;
left: -50%;
text-align: left;
}
Centering an element horizontally can get a little weird, as the functionality isn't very intuitive. Really, you need to play games with text-align:center; and margin:auto, and you'll need to know when to use which.
For example, if I want to center the contents of an element (raw-text), including buttons and inputs, I can use text-align:center.
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
If we add other elements to our container, those elements will have their width forced to 100%. This helps us emulate that it is centered because technically, at 100%, it is centered! Silly, isn't it?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
If your width property IS defined though, then you can use the margin: auto style to center it within the parent.
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
You need to determine which solution is best for you. I wish I could help more, but it is hard to know what solution will best fit your needs when you haven't provided the HTML for you problem!
Either way, I hope this JSFiddle helps clear things up!
I know that we normally use margin:auto however I am using the code below.
HTML :
<article>
<header></header>
</article>
CSS:
article{
max-width: 500px;
margin: auto; /* goes in the middle - great */
}
header{
width: 130%;
margin-left: -30%;
}
Demo
At this point I am placing the article in the center. However, as the browser/window size gets smaller, I would like to center the article as if its width was as wide as the header. Basically, at some point (as you shrink the browser window) the header will be at the edge on the left, whilst not taking advantage of the blank space on the right.
I don't want to have an extra div, but if I did, I would wrap the article in a div and give it an auto margin.
screenshot http://i3.minus.com/i2yPFqNDgeBbS.png
Maybe I'm misunderstanding something, but don't you just want:
margin-left: 15%;
on the header?
This code does what is described, but if you want to keep the two edges aligned you would need to get into some javascript, I recommend jquery for this kind of thing.
<html>
<head>
<title></title>
<style>
html, body {
width: 100%;
text-align: center;
}
.header {
width: 960px;
margin-left: auto;
margin-right: auto;
position: relative;
left: -100px;
background-color: blue;
}
.article {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="article">TODO write content</div>
</body>
</html>
I have a header that should always be displayed on top of the page about 20px from the top.
Right now it is defined with two divs and working the way it's supposed to.
http://jsfiddle.net/nBgj4/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
.subheader-left {
position: absolute;
top: 20px;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
position: absolute;
font-family: sans-serif;
font-size: 12px;
top: 20px;
right: 20px;}
</style>
<title>XYZ</title>
</head>
<body>
<div class="subheader-left">XYZ<br /></div>
<div class="subheader-right">LOREM</div>
</body>
</html>
As soon as I try to encapsulate the two DIV tags with a "header" DIV tag and assign it the elements that both encapsulated divs have in common (top: 20px) it breaks the design.
I always assumed that nested divs inherit from their parent divs and want to understand why this is not working in this case. I assum it is because of the "position: absolute" tag, but "position: relative" breaks the design.
thanks
http://jsbin.com/emulel/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
.header {top:20px;}
.subheader-left {
position: relative;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
position: relative;
font-family: sans-serif;
font-size: 12px;
right: 20px;}
</style>
<title>XYZ</title>
</head>
<body>
<div class="header">
<div class="subheader-left">XYZ<br /></div>
<div class="subheader-right">LOREM</div>
</div>
</body>
</html>
you mix a few things up:
header has no position assigned, so top: 20px; is useless. If you position elements, absolute will always positioned against a relative positioned element.
You should go for float:
keep your html like it is and add this CSS:
.header {
overflow: hidden;/* to contain the floated elements */
}
.subheader-left {
float: left;
}.subheader-right {
float: left;
}
Something like this should see you on the right path:
http://fiddle.jshell.net/3gZNM/3/
No need for absolute positioning.
You need
.subheader-left {
float:left;
}
.subheader-right{
float:right;
}
That's because in the first example, the divs have position:absolute, so their width is minimal.
But on the second one they have position:relative and its display is block, so they expand and their width is maximal. Then the second div goes to the second line.
But if you add floating, their width will be minimal and they will stay at the same line. Moreover, the second div will go to the right.
But then remember to change header's overflow into hidden, auto or scroll, or add <div style="clear:both"></div> at the end of the header.
I'm trying to negative position a DIV element (in the example is #content), but my problem is the div's container (#wrapper2), gets too much height (actually is the height the #content is giving, but as I'm moving the content up, I would like to decrease the height of #wrapper2 accordingly).
Here I give you an example to show what I'm trying to achieve. If you try the sample, you'll see that footer stays at too many distance from container. I can make a dirty hack here and make footer top:-200px too but then the scroll bar of the window goes over the footer.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body, div, p, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
If you have any suggestions, keep in mind that I must see both, the lightgrey and lightblue background (they're images on my site), so margin-top: -200px is not an option (like someone suggested in related questions that I've searched for)
Thanks!
Change the top property to margin-top
Demo
position: relative;
top: -200px;
changed to
margin-top: -200px;
For future references, what I've finally done is to merge the images on the wrapper1 and wrapper 2 in the same image (they were background patterns), so I only have one wrapper now, and I don't need to relative position the content above the second one, it just goes following the page flow.
In the end I've understood that you can't delete the unwanted height without using some sort of Javascript.