473,837 Members | 1,776 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Align DIV center?

Hi,

I'd like to align a <div> within the center of the visual canvas. The text
within the div should be left-aligned. How can I possibly achieve this? So
far I can only align text blocks centrally by using <table align="center"
.... .
Is this also possible for vertical alignment?

TIA,
Axel Dahmen
Jul 21 '05 #1
32 274555


Axel Dahmen wrote:

I'd like to align a <div> within the center of the visual canvas. The text
within the div should be left-aligned. How can I possibly achieve this? So
far I can only align text blocks centrally by using <table align="center"


Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;
margin-left: auto;
margin-right: auto;
}

<div class="someClas s">...</div>

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 21 '05 #2

"Martin Honnen" <ma*******@yaho o.de> wrote in message
news:41******** *************** @newsread2.arco r-online.net...


Axel Dahmen wrote:

I'd like to align a <div> within the center of the visual canvas. The
text
within the div should be left-aligned. How can I possibly achieve this?
So
far I can only align text blocks centrally by using <table align="center"


Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;
margin-left: auto;
margin-right: auto;
}

<div class="someClas s">...</div>

<snip />

and for a fixed width div use

div.someClass{
width: 500px;
position: relative;
left: 50%;
margin-left: -250px; /* half the width of the div */
}
--
Phil Thompson
W: http://www.doubleonegative.com/
Jul 21 '05 #3
On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
and for a fixed width div use


If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!

Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane
Jul 21 '05 #4
in comp.infosystem s.www.authoring.stylesheets, Phil Thompson wrote:
and for a fixed width div use

div.someClass{
width: 500px;
position: relative;
left: 50%;
margin-left: -250px; /* half the width of the div */
}


No. Please don't answer any posts until you have a clue. Your way makes
content unaccessible, if browser window is smaller than 500px. (it will
be just unaccessible, one also gets a scrollbar, but it doesn't allow one
to scroll left)

If it needs to work on IE<6:
http://dorward.me.uk/www/centre/



--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #5


Martin Honnen wrote:


Axel Dahmen wrote:

I'd like to align a <div> within the center of the visual canvas. The
text
within the div should be left-aligned. How can I possibly achieve
this? So
far I can only align text blocks centrally by using <table align="center"

Set the width to something smaller than 100% and the margin to auto e.g.
div.someClass {
width: 100%;


That should have been e.g.
width: 80%;
of course.

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 21 '05 #6

"Andrew Thompson" <Se********@www .invalid> wrote in message
news:k7******** *************** ******@40tude.n et...
On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
and for a fixed width div use
If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!


a page that is at least 500px wide. I know that isn't wholly accessible but
it is pretty damn close.


Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.
Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html

p.s. Sorry I spoke.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

Jul 21 '05 #7
On Sun, 21 Nov 2004 20:02:14 -0000, "Phil Thompson"
<ph******@doubl onegative.com> wrote:

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.


Perhaps you'd like to offer a few examples of sites where this is the
case?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 21 '05 #8
Given the effort that people who contribute to this group put
into encouraging fluid layout and having everything exactly
as big as the *user* wants, it is disappointing to see people
encouraging fixed widths that would lock the size of the page.

Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.

Read other peoples opinions here: http://www.designbyfire.com/000032.html

p.s. Sorry I spoke.


You are quite correct in pointing out this other method, Phil.
Really disappointing isn't it, to get such condascending comments such
as "get a clue" and the one above, instead of a sensible comment such as:
Yes, it does work, but has a drawback when the page is reduced to a
certain point, etc., etc. In certain situations however, it is a viable
and at times possibly the only option.

--
Gus
Jul 21 '05 #9
in comp.infosystem s.www.authoring.stylesheets, Phil Thompson wrote:

"Andrew Thompson" <Se********@www .invalid> wrote in message
news:k7******** *************** ******@40tude.n et...
On Sun, 21 Nov 2004 15:39:11 -0000, Phil Thompson wrote:
and for a fixed width div use
If I understand your CSS correctly, it will only work for a page
that is 500px wide. Please drag yourself into the third millenium!


a page that is at least 500px wide. I know that isn't wholly accessible but
it is pretty damn close.


500px is very bad idea:
1) Most people use much bigger window, so they get large unusable space
2) People using smaller screen will get scrollbar.

There is very little number of people using browser that would be good.

And if you center using the way you showed earlier, people using under
500px window can't use your site. Anything handheld fits that.
Oh my god, sorry. I didn't realise I'd just brought about the apocalypse.
Fluid is a great idea and yes it works sometimes but there are times, when
<big breath> shock horror, a fixed width layout works best.
No, fixed width works never best. Totally fluid is not best always
either, but it is much better than fixed width
Read other peoples opinions here: http://www.designbyfire.com/000032.html


http://www.htmlhelp.com/cgi-
bin/validate.cgi?ur l=http://www.designbyfir e.com/000032.html&war nings=yes

Don't take advice from people that use nested blockquotes to indent
stuff. CSS1 was published 8 years ago, and margins were supported good
enaugh in very first implementions.

From there:
Fixed:
| Pros
| Guarantees line length readability

You can do that without fixing layout. Read on max-width, and IE
alternative

| Guarantees ability to place images into the layout in relation to other
| design elements and type size

Unless user changes type size, in which case layout breaks.

| Allows for predictable printed results from screen to paper

Most likely one third on right hand side clipped.

| Allows for a predictable presentation as intended by the designer

If user has same fontsize and other settings as user.

Liquid:
| Cons
| Can produce unreadable or hard to scan line lengths

Unless you limit them, which does not require fixed width page, or even
element

| Can allow images to become out of proportion to resized type settings
| or other design elements

That seem to be only possible if done stupid way.

| Can have serious issues when printed, even clipping off some content

That practically never happens on liquid layout. It seems that the writer
has gotten this totally wrong.

Because said site uses fixed layout, I get scrollbar, and can scroll to
see about 30px of orange margin on right. It looks much better when I
force it to fit window. If this had been done differently, it would not
force me to scroll to see margin.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Jul 21 '05 #10

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

Similar topics

3
15022
by: Charles Crume | last post by:
Hello; I'm fairly new to CSS, but have learned that Mozilla is supposed to be the most compliant in rendering. I have a web page that uses a style sheet with a class named "page_links" that centers the various links at the top of the page, just under a heading as in: ---------------- HEADING ---------------
3
2259
by: VB Programmer | last post by:
I cant 'align center' a text box. First of all, all the justifications (left, center, right) on the toolbar are dimmed. Why? Also, when I try to do it through HTML (wrapping the control in a <p align="center"><asp:TextBox ...></p>) this doesn't work either. Any ideas?
3
2697
by: tshad | last post by:
I have the following: <tr valign="baseline"> <td align="center" width="103" colspan=2 nowrap> <asp:Button ID="ViewPositions" runat="server" Text="View Positions" OnClick="ViewPositions_Click" /> <asp:LinkButton text="Advanced" onClick="Advanced_Click" runat="server"/> </td> </tr>
2
12147
by: Eric Lindsay | last post by:
If I want to have the middle of an image vertically aligned with the middle of a heading (or several lines of heading), is there some particular way people would recommend? vertical-align: center looked made for that. The effect I want is img heading img heading img heading or heading
2
2216
by: Mrozu | last post by:
Hi How I can set CaptionAlign to Center. I can't find this option in DataGrid Properties... Default align is left... Thx Mrozu
3
2663
by: jaiwin | last post by:
I am insert a div tag in table. table width is 100%. div width is 500px. i want to center alignment in div tag. so which command i want to use this <table align="center" border="0" cellpadding="0" cellspacing="0" width="960"><tr><td align="center"> <div style="text-align:center;width:500px; height:340px"> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td>bfjksnskfn<td>
1
3135
by: Steve Richter | last post by:
I am using <div align=centerto center a horizontal menu on the page. Problem is the center align of the div is rippling down to the menu items and causing the text of the dynamic popup sub menu items to be centered also. How can I center my navigation menu without centering the menu item text? thanks, -Steve
3
3727
by: divina11 | last post by:
Oddly, I can't seem to get the image to align to the center of the page? I'm using IE 6, tried FireFox 2 still the same! The image just aligns to the right for same reason. The text aligns to the center fine, see my code below: <body> <h1 align=center>Test</h1><br><br> <img src="italy.jpg" align=center height=160 width=240 border=4> </body>
2
16372
by: yangtono | last post by:
Hi, I am creating a table to list some data. The table is using a sorting and highlight function that I found from the net. I can't attach image here, basically html will wrap the heading, therefore I notice the second line of the header is left align instead of centering. I believe it's because of the sort.htc script that will output an arrow when user click on the header to sort. The code is as below: <TABLE width="100%">
13
3334
by: Stevo | last post by:
I've found that for IE6+, if you add the property text-align:center to a DIV, then *anything* inside it gets centered. That can be a table, an object/embed, another DIV, an image, or some text. Firefox and Safari on the other hand don't treat text-align in that way. In my tests on those browsers, they only centers images and text. Any DIVs, object/embeds or tables remain default unaligned and generally appear on the left. Considering...
0
9691
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10891
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10582
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10638
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7821
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7009
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5859
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4480
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
3128
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.