значения свойства:
* {
padding
:
0
;
margin
}
body {
background-color
#FFF5EE
.main {
width
900px
height
500px
position
absolute
left
50%
top
margin-left
-450px
margin-top
-250px
.
, .
right
{
270px
float
border
1px
solid
#478E8E
#FFF
center
display
: table;
.empty {
42px
.a {
vertical-align
.c {
table-cell
.d {
middle
.e {
bottom
.f {
super
#FFD700
.g {
sub
.h {
100px
#9ACD32
.k {
-100px
* { padding: 0; margin: 0; } body { background-color: #FFF5EE; } .main { width: 900px; height: 500px; position: absolute; left: 50%; top: 50%; margin-left: -450px; margin-top: -250px; } .left, .right { width: 270px; height: 500px; float: left; border: 1px solid #478E8E; background-color: #FFF; } .center { width: 270px; height: 500px; float: left; border: 1px solid #478E8E; background-color: #FFF; display: table; } .empty { width: 42px; height: 500px; float: left; } .a { vertical-align: top; } .c { vertical-align: top; display: table-cell; } .d { vertical-align: middle; display: table-cell; } .e { vertical-align: bottom; display: table-cell; } .f { vertical-align: super; background-color: #FFD700; } .g { vertical-align: sub; background-color: #FFD700; } .h { vertical-align: 100px; background-color: #9ACD32; } .k { vertical-align: -100px; background-color: #9ACD32; }
<!DOCTYPE html>
<
html
>
head
meta
charset
=
"utf-8"
/>
title
>New Page</
link
href
"css/style.css"
rel
"stylesheet"
script
type
"text/javascript"
src
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></
</
body
div
class
"main"
"left"
p
"a"
>Hello World! - top</
id
"p1"
>Hello World! - middle</
"b"
>Hello World! - bottom</
"empty"
"center"
<!--<p class="c">Hello World! - top</p>-->
"d"
<!--<p class="e">Hello World! - bottom</p>-->
"right"
>Hello <
span
"f"
>World!</
> super</
"g"
> sub</
"h"
> 100px</
"k"
> -100px</
/*JavaScript*/
document.getElementById("p1").style.verticalAlign = "middle";
/*jQuery*/
$(document).ready(function () {
$(".b").css({ "vertical-align": "bottom" });
});