New Topic/Question
Reply
div {
position:absolute;
width: auto;
padding: 10px;
border: 1px solid black;
margin: 10px;
}
Hope someone can help!
3 Replies - 361 Views - Last Post: 04 January 2011 - 08:36 AM
#1
RawrItsAdam
- D.I.C Head
-
Reputation: 1
- Posts: 68
- Joined: 10-November 08
Setting a DIV
Posted 03 January 2011 - 06:21 PM
Hi there I'm currently starting a new project and come to my first hurdle, I'm trying to make a div align in the centre of the screen, but with no luck, here is the CSS I have so far:
Hope someone can help!
Hope someone can help!
Is This A Good Question/Topic?
0
MultiQuoteReplies To: Setting a DIV
#2
e_i_pi
- = -1
-
Reputation: 745
- Posts: 1,525
- Joined: 30-January 09
Re: Setting a DIV
Posted 03 January 2011 - 10:15 PM
Not sure if this works in FF / Opera etc, but it should do...
<style>
div {
margin-right: 50%;
margin-left: 50%;
border: 1px solid black;
}
</style>
<div>
ABCD
</div>
Was This Post Helpful?
0
#3
Excavator
- D.I.C Head
-
Reputation: 20
- Posts: 59
- Joined: 10-December 06
Re: Setting a DIV
Posted 04 January 2011 - 01:34 AM
Hello RawrItsAdam,
To center an element you need three things:
To further center it vertically takes a little more...
Have a look at a vertical centering demo.
To center an element you need three things:
- a valid DocType
- an element with a width
- that elements right/left margins set to auto
To further center it vertically takes a little more...
Have a look at a vertical centering demo.
Was This Post Helpful?
0
#4
mhollis
- D.I.C Head
Reputation: 16
- Posts: 61
- Joined: 10-April 10
Re: Setting a DIV
Posted 04 January 2011 - 08:36 AM
RawrItsAdam, on 03 January 2011 - 07:21 PM, said:
Hi there I'm currently starting a new project and come to my first hurdle, I'm trying to make a div align in the centre of the screen, but with no luck, here is the CSS I have so far:
Hope someone can help!
div {
position:absolute;
width: auto;
padding: 10px;
border: 1px solid black;
margin: 10px;
}
Hope someone can help!
Firstly, what you have there is an absolute-positioned (or AP) div. While absolute positioning may be useful within the context of another <div> tag where the positioning is defined by the parent, I have found AP <div> tags to be a good way to get very lost, very quickly. Don't do that.
If you look at an AP div in a browser and then expand the browser window, it will retain its absolute positioning, based on coordinates that start at 0,0 on the upper left-hand corner of the browser window.
Use the box model with margin, padding and border to set up your divs. A really handy resource is this web page, which you should refer back to as you begin building pages.
To position a <div> tag centered within another <div> tag, I usually do the math. If the container for the <div> to be centered is 800 pixels (px) wide and the <div> I want centered in it is 400 pixels wide, I will do this in CSS (and in a separate stylesheet):
#container {
width: 800px;
}
#centeredDiv {
width: 400 px;
margin-left: 200px;
}
Then in HTML (assuming you have proper head tags, doctype declarations and a link to your stylesheet:
<div id="container">stuff that is in the 800px wide div goes here.
<div id="centeredDiv>stuff for the centered div goes here.</div>
more stuff within that 800px wide div can go here.
</div>
Now, what I did not do is define heights, backgrounds or any other objects for these <div> tags in CSS. But you will find that this method always works.
There is a way to "cheat" and cause elements to always be centered, but it can cause lots of problems. When you define your <body> in CSS, you can do the following:
body {
text-align: center;
}
What will happen is all <div> tags in the body of your document will be centered. Also, all text within them will be centered as well. So you will have to adjust everything you don't want centered. To my way of thinking, that's a bit of a pain, but this method will work.
Was This Post Helpful?
0
Page 1 of 1
|
|
| 