Vertical aligning with CSS

Contributing User

Join Date: Apr 2007

Posts: 372

Time spent in forums: 1 h 24 m 57 sec
Reputation Power: 3

Vertical aligning with CSS

Assume a div element with height of 50px. Inside this div is a picture 25x25.
All I need is to vertical align this picture to the middle of that div.
I can do this with padding-top, but the height of parent div can vary.
I tried vertical-align:middle, but it doesn't work. The only thing, that works, is using tables and valign:middle. There should be a way to do it with CSS.

Any idea?

August 27th, 2003, 08:45 AM

crisp

Join Date: Apr 2007

Location: Holland

Posts: 336

Time spent in forums: < 1 sec
Reputation Power: 3

RE: Vertical aligning with CSS

Code:

<style type="text/css">
#container {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
#picture {
  display: block;
  position: absolute:
  top: 50%;
  left: 50%;
  margin-top: -12px;
  margin-left: -12px;
  width: 25px;
  height: 25px;
}
</style>
<div id="container">
  <img id="picture" src="picture.gif" alt="" />
</div>

August 27th, 2003, 10:50 AM

zombie

Codewalkers Intermediate (1500 - 1999 posts)

Join Date: Apr 2007

Location: serbia

Posts: 1,876

Time spent in forums: < 1 sec
Reputation Power: 4

RE: Vertical aligning with CSS

good work crisp.. i knew it can be done (with %), but i couldn't remember to use margins to make it rigth at the middle...

:^

August 27th, 2003, 04:42 PM

Contributing User

Join Date: Apr 2007

Posts: 372

Time spent in forums: 1 h 24 m 57 sec
Reputation Power: 3

RE: Vertical aligning with CSS

Thanks crisp!

It looks good, can't wait to try it.

I hope it will work for major browsers.

August 27th, 2003, 04:50 PM

Contributing User

Join Date: Apr 2007

Location: Scottsdale AZ, US

Posts: 2,252

Time spent in forums: 2 h 48 m 45 sec
Reputation Power: 5

RE: Vertical aligning with CSS

50% - half the image, sweet logic, it was baffling me. Has anyone put php variables in a style sheet? Can it be done in an external style sheet, or only in an inline or local style?

one question is #picture the same as .picture ?

August 27th, 2003, 06:35 PM

Contributing User

Codewalkers Beginner (1000 - 1499 posts)

Join Date: Apr 2007

Location: Cape Cod

Posts: 1,347

Time spent in forums: 3 h 52 m 2 sec
Reputation Power: 4

RE: Vertical aligning with CSS

You can easily use PHP in an external stylesheet, just reference style.php (or whatever the name of the script is) instead of style.css. style.php just needs to output a valid style sheet rather than HTML.

Your web server is probably setup to serve php pages as text/html by default. This shouldn't be a problem, but adding a header to say it's actually text/css should avoid warnings in really picky browsers.

August 27th, 2003, 08:56 PM

Contributing User

Join Date: Apr 2007

Location: Scottsdale AZ, US

Posts: 2,252

Time spent in forums: 2 h 48 m 45 sec
Reputation Power: 5

RE: Vertical aligning with CSS

let me make sure I have this correct:

php Code:

Original - php Code

 
// I currently have this in my header file 
<link rel="stylesheet" href="../includes/style.css" type="text/css">
// I can change this to 
<link rel="stylesheet" href="../includes/style.php" type="text/css">
// then in my style sheet I could replace 
.header {            
        background-color: #C06270;  
    color: #ffffff;
    font-size: 10pt;
    font-weight: bold
}
// with 
.header {
    background-color: <?php echo $bgcolor ?>; 
    color: <?php echo $font_color ?>;
    font-size: 10pt;
    font-weight: bold
}

I have been meaning to experiment with this for a long time but I have just been editing my same old stylesheet on just about every site I make.

I still don't understand #class as opposed to .class is there a difference? I guess I could rtfm...

August 28th, 2003, 02:11 AM

Contributing User

Join Date: Apr 2007

Location: Cape Cod

Posts: 1,347

Time spent in forums: 3 h 52 m 2 sec
Reputation Power: 4

RE: RE: Vertical aligning with CSS

Quote:

let me make sure I have this correct:

Yes, that should work.

Quote:

I still don't understand #class as opposed to .class is there a difference? I guess I could rtfm...

Well, #class is a mis-leading way of writing it. Using #id or #name makes it a little clearer.

# selects elements by id or name attribute
. selects elements by class attribute

August 28th, 2003, 07:38 AM

Contributing User

Join Date: Apr 2007

Location: Scottsdale AZ, US

Posts: 2,252

Time spent in forums: 2 h 48 m 45 sec
Reputation Power: 5

RE: Vertical aligning with CSS

I see, thanks. I always use class="something" on every element I want to control so I have never used the # sign.

Is defining the link as type="text/css" what you referred to as adding a header?

#10

August 28th, 2003, 11:25 AM

Contributing User

Join Date: Apr 2007

Location: Cape Cod

Posts: 1,347

Time spent in forums: 3 h 52 m 2 sec
Reputation Power: 4

RE: RE: Vertical aligning with CSS

Quote:

Is defining the link as type="text/css" what you referred to as adding a header?

No, that's not what I meant, although you should definitely leave that in there.

If you load your page with Mozilla and open up the Javascript console, you'll probably see something like: Warning: The stylesheet style.php was loaded as CSS even though its MIME type, "text/plain", is not "text/css".

I think adding header('Content-type: text/css') to style.php should fix that. That's getting really picky though, so I wouldn't worry about.

#11

August 28th, 2003, 04:57 PM

Contributing User

Join Date: Apr 2007

Posts: 372

Time spent in forums: 1 h 24 m 57 sec
Reputation Power: 3

RE: Vertical aligning with CSS

Using a php file as a style sheet is interesting idea.

One more question:

What units are you using? I'm using pixels but in different browsers pixels have different size and it is hard to control right position of elements.

I think this is cannot be avoided or am I wrong?

#12

August 28th, 2003, 04:59 PM

zombie

Join Date: Apr 2007

Location: serbia

Posts: 1,876

Time spent in forums: < 1 sec
Reputation Power: 4

RE: Vertical aligning with CSS

if you write old-type html pages, don't worry about content type...

if you want to write XHTML strict standard pages, than you should send that text/css content type...

(you also should send application/xhtml+xml but nobody does that, so what then...)

btw, use em and % units. on normal zoom/text size, 1px is aproximatly around 0.1em, so conversion is not that dificult...

#13

August 28th, 2003, 05:10 PM

Contributing User

Join Date: Apr 2007

Posts: 372

Time spent in forums: 1 h 24 m 57 sec
Reputation Power: 3

RE: Vertical aligning with CSS

Hm, I don't see any reason to write pages in XHTML right now.

I even don't know its specifications.

But I don't like when my pages are exactly as I wanted in IE and Opera and then a little bit shaky in Mozilla and Konqueror. But that's an old problem...

Do you know a good page with CSS 'tricks'?

I decided to rewrite my table&CSS structure structure to pure CSS, so it would be handy.

#14

August 28th, 2003, 05:16 PM

Contributing User

Join Date: Apr 2007

Location: Scottsdale AZ, US

Posts: 2,252

Time spent in forums: 2 h 48 m 45 sec
Reputation Power: 5

RE: Vertical aligning with CSS

I really like the idea of putting php variables in my style sheet as I already include a file in all my pages has the colors for the project included as variables. Since many of the styles I use, I use repeatedly I drop my standard style sheet in each new project then edit the colors to match the project. If I had variables in there I could just edit the list of colors in one place, one time and presto the color scheme would be done.

#15

August 28th, 2003, 06:58 PM