Single post in Guide to CSS: Beginner to Expert

Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >

Calixita

👍 1

Posted 26/Mar/2022 04:32:45 (2 years ago)

QUOTE originally posted by Aemilia

Edit;; Added the code under tables. So now everyone can see how to vertically align within a table.

Long Post

Eeveelution Collection

Female Eevee
Regular	Shiny	Albino	Melanistic

Male Eevee
Regular	Shiny	Albino	Melanistic

Vaporeon
Regular	Shiny	Albino	Melanistic

Jolteon
Regular	Shiny	Albino	Melanistic

Regular	Shiny	Albino	Melanistic
Flareon
Regular	Shiny	Albino	Melanistic

Espeon
Regular	Shiny	Albino	Melanistic

Umbreon
Regular	Shiny	Albino	Melanistic

Leafeon
Regular	Shiny	Albino	Melanistic

Glaceon
Regular	Shiny	Albino	Melanistic

Sylveon
Regular	Shiny	Albino	Melanistic

This only works in anything with display set to table or in a table. Add vertical-align: middle; to the td block.

Code

[center][b]Eeveelution Collection[/b][/center] [center][size=9][table] [tr][th=10x1]Female Eevee[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][url=https://pfq.link/?2rYXZ][img]https://pfq.link/?2rYXZ=platform.png[/img][/url][/td] [td][url=https://pfq.link/?2rYNg][img]https://pfq.link/?2rYNg=platform.png[/img][/url][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Male Eevee[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][url=https://pfq.link/?2Drj8][img]https://pfq.link/?2Drj8=platform.png[/img][/url][/td] [td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Vaporeon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][url=https://pfq.link/?23Dd3][img]https://pfq.link/?23Dd3=platform.png[/img][/url][/td] [td][url=https://pfq.link/?2PxDS][img]https://pfq.link/?2PxDS=platform.png[/img][/url][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Jolteon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr][th=10x1]Flareon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Espeon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Umbreon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][url=https://pfq.link/?2P7M2][img]https://pfq.link/?2P7M2=platform.png[/img][/url][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Leafeon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][url=https://pfq.link/?2cNlL][img]https://pfq.link/?2cNlL=platform.png[/img][/url][/td] [td][url=https://pfq.link/?2DDCf][img]https://pfq.link/?2DDCf=platform.png[/img][/url][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Glaceon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [tr][th=10x1]Sylveon[/th][/tr] [tr] [th]Regular[/th] [th]Shiny[/th] [th]Albino[/th] [th]Melanistic[/th] [/tr] [tr] [td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td] [td][url=https://pfq.link/?2d_LQ][img]https://pfq.link/?2d_LQ=platform.png[/img][/url][/td] [td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td] [td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td] [/tr] [/table][/size] [style] table { margin:1px auto; td { width: 130px; height: 20px; vertical-align: middle; } } [/style][/center]

This is perfect, thank you so much!

avatar by hunbloom (permission)