CSS problem

Status
Not open for further replies.
lucab

lucab

New member
Jan 4, 2007
677
3
0
I am trying to center an image in my header (#header img). In the past, I have used "text-align: center" to accomplish this task. However, I am using "position: relative" for #header and this doesn't seem to be working now.

There is no way to float in the center, and when I change to position fixed or absolute, the template pretty much breaks. I am really lost and have no idea how to get this damn logo centered!

I know this is probably very easy to solve. I have been looking through w3schools but can't seem to find the answer.

Thanks in advance,

luca
 


lucab said:
I am trying to center an image in my header (#header img). In the past, I have used "text-align: center" to accomplish this task. However, I am using "position: relative" for #header and this doesn't seem to be working now.
Click to expand...

The answer depends on several things, including what browser(s) you're testing in, what doctype you're using and whether there's a container div ... it would be a lot easier if we could see the code.

But just a guess - have you tried using "display: block; margin-left: auto; margin-right: auto;" on the image in addition to text-align:center?
 
Hey thank you very much you two. That piece of code worked. After I posted I realized I probably hadn't given enough info, but wanted to see if I got any response.

I really appreciate it. ++rep. Ain't got nothing left to hit you up barman, I will tomorrow :).

So that piece of code basically tells the browser to display the image evenly distributed from the left and right margin?

BTW, i am using seamonkey, firefox, ie, and opera to test my sites

thx again!
 
Yea, the method of using auto margin left and right in addition to text-align center will center any div. For example you could use that on a main container to center your site on the page, you just have to remember to set text-align: left; on the divs you have text in that you want to be aligned on the left.
 
Huh, that broke in IE. For some reason, it wrapped an image I had in the main content in a yellow box. WTF

The logo isn't even displaying in IE. So lame.

edit : i should note that i am using IE on a mac, it will probably work fine on a regular version
 
You could just override your CSS

Just enclose your image in <center> tags in the HTML code and it'll work fine, and yes the <center> tag is still used today and it will pass W3C standards.

I personally don't like doing anything that involves relative positioning, it can get really messy, really quickly.
 
Agloco Hype said:
You could just override your CSS

Just enclose your image in <center> tags in the HTML code and it'll work fine, and yes the <center> tag is still used today and it will pass W3C standards.

I personally don't like doing anything that involves relative positioning, it can get really messy, really quickly.
Click to expand...

Well, this was actually suggested by a friend of mine. The problem is that I am using Drupal, so I am not actually editing any of the HTML directly. I tried to edit the output part of the theme, page.tpl.php, and input those <center> tags. i placed them in a few different spots that made sense to me around the header img, but no luck. Twice I think I broke the parser, and the other placements did nothing. I don't have too much experience with theming in drupal, but I have been doing a lot lately so I am feeling a lot more comfortable. Still, I couldn't get the markup you suggested to work.
 
Status
Not open for further replies.
Top Bottom
Back