473,398 Members | 2,088 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,398 software developers and data experts.

How do I center align a Div in my Stylesheet?

Hello all,

I'm trying to create a Div style for a website that I'm playing around
with.

I'd like the DIV itsself to be center-aligned, but the text within the
div to be left-aligned. My div style looks like this:

div.main { width: 460; height: auto; text-align: left }

I've tried working other commands in there like:
"align: center" and "position: center" but have not been able to
acheive what I want. How can this be accomplished?

Thanks.

Jul 21 '05 #1
4 88135
Els
Viken Karaguesian wrote:
Hello all,

I'm trying to create a Div style for a website that I'm playing around
with.

I'd like the DIV itsself to be center-aligned, but the text within the
div to be left-aligned. My div style looks like this:

div.main { width: 460; height: auto; text-align: left }

I've tried working other commands in there like:
"align: center" and "position: center" but have not been able to
acheive what I want. How can this be accomplished?


For IE5 you need to set text-align:center on the parent element, for
standards compliant browsers (and IE6 with a doctype) you need to set
the left and right margin of the div to equal sizes. This may be a
percentage, a fixed width, or just "auto". In your case, auto seems
the right way.

http://locusmeus.com/html-css/centeringpage.html

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: The Specials - Too much too young
Jul 21 '05 #2
#divsid { margin: auto 33% auto 33% }

put's it right about center.

Jul 21 '05 #3
DU
Nathan wrote:
#divsid { margin: auto 33% auto 33% }

put's it right about center.


What you do is define, squeeze the content within 34% of the parent
element's width. That's not how to best center an element.

"if both 'margin-left' and 'margin-right' are 'auto', they will be set
to equal values. This will center the element inside its parent."
CSS1 horizontal formating
http://www.w3.org/TR/REC-CSS1#horizontal-formatting

#divsid { margin-left: auto; margin-right: auto; text-align: left;}

Auto value means to take as much as you can once the content has been
rendered. So, maybe the content will use 90% of the parent's width,
leaving 5% for left and right margin, not 34%.

DU
--
The site said to use Internet Explorer 5 or better... so I switched to
Mozilla 1.7.6 :)
Jul 21 '05 #4
Viken Karaguesian wrote:

I'd like the DIV itsself to be center-aligned, but the text within the
http://dorward.me.uk/www/centre/#block
div.main { width: 460; height: auto; text-align: left }
The width property takes a length, not an integer (hint - units are required
for lengths other then zero).

The validator would have picked this up.
I've tried working other commands in there like:
"align: center" and "position: center"


There is no align property and "center" is not one of the accepted values
for the position property. The validator would have picked this up too, as
would RTFMing.

http://www.w3.org/TR/CSS2/
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 21 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Philipp Lenssen | last post by:
Is it possible in IE6+NS7 to center-align a div of fixed width which itself contains elements which use "position: absolute"? Using "margin-left: auto" and "margin-right: auto" works well to center...
3
by: bissatch | last post by:
Hi, I have the following page: www.martynbissett.co.uk/index_div.html It is very basic that all elements will be structured using <div> tags and CSS styles will define the layout. What I...
7
by: Jeff Thies | last post by:
I've got a page with content that I want aligned in the center, with equal margins on both sides (text, left aligned). It seems to me that this is a complex thing to get right on most browsers...
3
by: Tom Bernsen | last post by:
This should be simple, I did it with a datagrid easily enough. Using VS Net 1.1, I want a label over the datagrid and a hyperlink below it (from WebForms toolbox), with BOTH of them centered (text...
2
by: Dinesh | last post by:
Dear All, Can u tell me how to center align a div (Panel) in Asp.Net 2.0. If we use align="center" then it will be converted to text-align:center which will align all the content of the div's...
19
roula
by: roula | last post by:
I HATE DIVS AND DIFFERENT BROWSERS!!! i spent the whole day and night searching for a way to center align stupid divs, the problem is that the code is so sensitive, i lost my mind trying to make them...
4
by: DiamondEagle | last post by:
Is there a way to center the following div without using the <center> tags? <body bgcolor="#FFFFFF"> <center> <div id="Test" style="background-color:#000000; color:#ffffff; width: 80%;...
8
by: Bob Altman | last post by:
Hi all, This has got to be a dumb question, but... What is the CSS property that I would use to center a table on the web page? If I set the table's Align property in the VS 2008 property...
1
by: Ronit Passwala | last post by:
I am using below CSS to align center for Select Tag options. But it is not aligning text to center in all browser. It is working in FF3.6 browser but not working in IE8, Chrome 10.0 and Safari 4.0...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.