473,387 Members | 1,771 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,387 software developers and data experts.

Center align a DIV without <center> tags

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%; text-align:center; line-height:100px;">Hello</div>
</center>
</body>

I want the div AND the text in the div to be aligned to the center.

Thanks...

(It's probably REALLY simple and I'll be quite embarassed that I
asked... but it's been one of "THOSE" days...)
Jun 27 '08 #1
4 2648
On Jun 18, 2:43*pm, DiamondEagle <and...@webmail.co.zawrote:
Is there a way to center the following div without using the <center>
tags?

<body bgcolor="#FFFFFF">
1. Use CSS not HTML attributes.
2. Set foreground and background colours together to avoid clashes
with user defaults.
<center>
<div id="Test" style="background-color:#000000; color:#ffffff; width:
80%; text-align:center; line-height:100px;">Hello</div>
</center>
</body>

I want the div AND the text in the div to be aligned to the center.
It's not 100% obvious and hence it is a FAQ. Set margin-left and
margin-right to auto.

Make sure that your doctype is triggering standards mode or IE won't
co-operate.

Steve

Jun 27 '08 #2
In article
<13**********************************@34g2000hsf.g ooglegroups.com>,
DiamondEagle <an****@webmail.co.zawrote:
Is there a way to center the following div without using the <center>
tags?
The first two pages of

<http://netweaver.com.au/centring/>

should give you a good idea of how to do both these things.

--
dorayme
Jun 27 '08 #3
dorayme scribed:
>In article
<13**********************************@34g2000hsf. googlegroups.com>,
DiamondEagle <an****@webmail.co.zawrote:
>Is there a way to center the following div without using the <center>
tags?

The first two pages of

<http://netweaver.com.au/centring/>

should give you a good idea of how to do both these things.
That seems like a very helpful site. Is there a navigation page? The home
page seems to have only a mail form.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Jun 27 '08 #4
In article <ji********************************@4ax.com>,
Ed Jay <ed***@aes-intl.comwrote:
dorayme scribed:
In article
<13**********************************@34g2000hsf.g ooglegroups.com>,
DiamondEagle <an****@webmail.co.zawrote:
Is there a way to center the following div without using the <center>
tags?
The first two pages of

<http://netweaver.com.au/centring/>

should give you a good idea of how to do both these things.

That seems like a very helpful site. Is there a navigation page? The home
page seems to have only a mail form.
The things on this server are mainly just sets of self-contained pages.
This set seems short enough not to need a menu but if I grow it, I guess
I will put some navigation beyond the pages menu at top and bottom.

I am a bit worried at the slightly artificial connection of things under
the topic of centring in this set. What else should I put?

* My views on the aesthetics of centring?

* My take on why centring has such an appeal (I reckon it has to do
with the importance of left/right symmetry in animal evolution)?

* Perhaps an attempt at humorous, maybe even florid writing, about why
archery targets have the bull's eye in the centre; after all, even a
bull does not have its eye in the dead centre of its bulk, neither
mass-fully nor geometrically speaking? And besides, it has two eyes.

* Why don't dart boards have two bulls eyes like bulls, you could get
100 only if you can throw two darts at once each landing on different
eyes? Perhaps I could make and market a special and more rational
dart-board, closer to bull. (psst, Boji, wanna send me some $buckeroos
as an advance payment for one of these?)

--
dorayme
Jun 27 '08 #5

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

Similar topics

2
by: The Plankmeister | last post by:
Hi... What's an equivalent of doing: <center>hello!</center> in 4.01 strict? I'm using stylesheets and am telling the various selectors I want to be centred to "text-align : center;" but...
5
by: Nathan Sokalski | last post by:
As most of us probably know, the <centertag is deprecated. Because many elements and controls have an align attribute, centering them is easy enough. However, certain elements/controls do not (such...
5
by: Agix | last post by:
Hi there, Please check out : http://clarifysolutions.co.uk/certenroll/ The source is included below. This page is a test, so I can play about with paddings, margins and layouts using divs as...
1
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...
1
by: jobs | last post by:
I have a simple login page with roughly a 300px x 300px image behind the asp.net login control. I need the login control to land in the middle of the image. I want both the image and the login...
3
by: YaoBao | last post by:
In my main page, I use <cfinclude> tag to include my header and footer. But I get error. "Context validation error for the cfif tag. The start tag must have a matching end tag. An explicit end...
13
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. ...
5
Plater
by: Plater | last post by:
To accomplish what I am looking for (the image centered in it's parent top 'centered') I have done this: <div id="backing"> <div id="lbImgBacker"> <center> <img id="Image1"...
4
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
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
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...
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
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...

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.