473,406 Members | 2,404 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,406 software developers and data experts.

Alternative to the <center> tag

Plater
7,872 Expert 4TB
To accomplish what I am looking for (the image centered in it's parent top 'centered') I have done this:
Expand|Select|Wrap|Line Numbers
  1. <div id="backing">
  2.    <div id="lbImgBacker">
  3.       <center>
  4.          <img id="Image1" src="banner.JPG" alt="" style="border-width:0px;" />
  5.       </center>
  6.    </div>
  7.    <div id="ExampleLeftAlignElement" ></div> 
  8.    <!-- other elements and the rest of the page -->
  9. </div>
  10.  
The following CSS is also applied
Expand|Select|Wrap|Line Numbers
  1. #backing
  2. {
  3.     z-index: 100;
  4.     position: static;
  5.     display: block;
  6.     width: 760px;
  7.     background-color: #faebd8;
  8.     text-align:left; 
  9. }
  10. #Image1
  11. {
  12.     z-index: 100;
  13.     display: block;
  14.     height: 127px;
  15.     width: 756px;
  16.     border-width: 0px;
  17.     cursor: pointer ;
  18. }
  19.  
  20. #lbImgBacker
  21. {
  22.     z-index: 100;
  23.     position: static;
  24.     display: inline;
  25.     text-align: center;
  26.     width: 760px;
  27.     height: 130px;
  28.     color: #804000;
  29.     background-color: Transparent;
  30.     font-weight: bold;
  31.     font-size: 12pt;
  32. }
  33.  

The "text-align:left" in #backing is required for the rest of the page, and seems to override any child styles I attemp to apply.

For arguments sake, "lbImgBacker" is the same width as "backing" and doesn't matter if the text-align is left/center/right. But the image INSIDE "lbImgBacker" should be centered inside of it. This is what I cannot seem to do with style properties. That <center> tag is the only thing that does it, but is not allowed by W3 to be there.
Do I have an alternataive?
Oct 2 '08 #1
5 4660
David Laakso
397 Expert 256MB
Delete the opening and closing center tags. Add this to the CSS:
Expand|Select|Wrap|Line Numbers
  1. #backing
  2. { margin: 0 auto;}
  3. #Image1
  4. { margin: 0 auto;}
  5.  
Oct 2 '08 #2
Plater
7,872 Expert 4TB
Well I don't understand it, but that seemed to do the trick. Thanks!
Oct 2 '08 #3
David Laakso
397 Expert 256MB
Well I don't understand it, but that seemed to do the trick. Thanks!
I share your opinion. Or, do I?
w3c
Oct 3 '08 #4
Atli
5,058 Expert 4TB
Well I don't understand it, but that seemed to do the trick. Thanks!
If you set the margin to auto, the browser will (should) try to automatically calculate the margin on all sides of the element, effectively placing it at the center.

This usually depends on both the inner and outer elements to have a fixed width so the margin can be calculated. This doesn't appear to work with vertical alignment tho, which is kind of weird considering that it's basically the same calculations.
Oct 3 '08 #5
David Laakso
397 Expert 256MB
This doesn't appear to work with vertical alignment tho, which is kind of weird considering that it's basically the same calculations.
Affirmative, Major Tom. Take your protein pill. Put your helmet on.

Ground Control,
Huston
Oct 3 '08 #6

Sign in to post your reply or Sign up for a free account.

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...
34
by: Mark Moore | last post by:
It looks like there's a pretty serious CSS bug in IE6 (v6.0.2800.1106). The HTML below is validated STRICT HTML 4.01 and renders as I would expect in Opera, FrontPage, and Netscape. For some...
4
by: Dan | last post by:
Hi, I would just like to know if the istream operator takes only one parammeter(object) at a time (like z) ? istream operator>>(istream& in, Shape &z) Cause I keep getting error concerning the...
9
by: Julia Briggs | last post by:
How do I construct a <iframe> or equivalent for FireFox/NS browsers, inside a screen centered <div> tag? Can it be done?
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...
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...
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%;...
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. ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
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
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
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...
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
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
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.