Web Design

From Jeff's Weather Service ~ Wiki Page
Revision as of 07:25, 8 September 2011 by Wikiroot (Talk | contribs) (Vertically Aligning text:)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Web Design

Converting EM to Pixels

1.0em = 10px
1.1em = 11px
1.2em = 12px
2.0em = 20px
5.0em = 50px

RGB Color Calculator


216 Web Safe Colors


HTML Colors


HTML Symbols/Shapes


CSS Color Names


Useful Links



Learn HTML:


Learn CSS:


Learn Javascript:


Learn PHP:




Vertically Aligning text:


Method 1

The following example makes two (non-trivial) assumptions. If you can meet these assumptions, then this method is for you:

You can put the content that you want to center inside a block and specify a fixed height for that inner content block. It's alright to absolutely-position this content. (Usually fine, since the parent element inside which the content is centered can still be in flow.

If you can accept the above necessities, the solution is:

1.) Specify the parent container as position:relative or position:absolute.

2.) Specify a fixed height on the child container.

3.) Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.

4.) Set margin-top:-yy where yy is half the height of the child container to offset the item up.

An example of this in code:

<style type="text/css">
 #myoutercontainer { position:relative }
 #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }

Hey look! I'm vertically centered!

How sweet is this?!

Method 2

This method requires that you be able to satisfy the following conditions:

   You have only a single line of text that you want to center.
   You can specify a fixed-height for the parent element.

If you can accept the above necessities, the solution is:

1.) Set the line-height of the parent element to the fixed height you want.

An example of this in code:

<style type="text/css">
 #myoutercontainer2 { line-height:4em }

Hey, this is vertically centered. Yay!

GIMP Tutorials

Adding outline to text: