Ví dụ về thuộc tính vertical-align

Thuộc tính vertical-align

Thuộc tính vertical-align : sắp xếp các nội dung theo chiều dọc.

vertical-align: baseline;

Đây là dạng cơ bản, mặc định, các thành phần đều nằm theo cùng đường cơ bản (baseline).

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: baseline;
}
</style>
</head>

<body>
<p>vertical-align: <span>baseline;</span></p>
</body>
</html>

vertical-align: baseline;

vertical-align: sub;

Canh lề thành phần giống như sử dụng subscript.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: sub;
}
</style>
</head>

<body>
<p>vertical-align: <span>sub;</span></p>
</body>
</html>

vertical-align: sub;

vertical-align: super;

Canh lề thành phần giống như sử dụng superscript.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: super;
}
</style>
</head>

<body>
<p>vertical-align: <span>super;</span></p>
</body>
</html>

vertical-align: super;

vertical-align: top;

Canh phần trên cùng của thành phần theo phần trên cùng cao nhất của các thành phần trong cùng hàng.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: top;
}
</style>
</head>

<body>
<p>vertical-align: <span>top;</span></p>
</body>
</html>

vertical-align: top;

vertical-align: text-top;

Canh phần trên cùng của thành phần theo phần trên cùng cao nhất của text của thành phần bao ngoài.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: text-top;
}
</style>
</head>

<body>
<p>vertical-align: <span>text-top;</span></p>
</body>
</html>

vertical-align: text-top;

vertical-align: middle;

Thành phần sẽ được canh giữa theo thành phần bao ngoài.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: middle;
}
</style>
</head>

<body>
<p>vertical-align: <span>middle;</span></p>
</body>
</html>

vertical-align: middle;

vertical-align: bottom;

Canh phần dưới cùng của thành phần theo phần dưới cùng thấp nhất của các thành phần trong cùng hàng.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: bottom;
}
</style>
</head>

<body>
<p>vertical-align: <span>bottom;</span></p>
</body>
</html>

vertical-align: bottom;

vertical-align: text-bottom;

Canh phần dưới cùng của thành phần theo phần dưới cùng thấp nhất của text của thành phần bao ngoài.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: text-bottom;
}
</style>
</head>

<body>
<p>vertical-align: <span>text-bottom;</span></p>
</body>
</html>

vertical-align: text-bottom;

vertical-align: XXpx;

Xác định khoảng cách cho thành phần theo số dương.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: 10px;
}
</style>
</head>

<body>
<p>vertical-align: <span>10px;</span></p>
</body>
</html>

vertical-align: 10px;

vertical-align: -XXpx;

Xác định khoảng cách cho thành phần theo số âm.

<html>
<head>
<style type="text/css">
p {
    background: #00ccff;
}

p span {
    background: #ff0000;
    vertical-align: -10px;
}
</style>
</head>

<body>
<p>vertical-align: <span>-10px;</span></p>
</body>
</html>

vertical-align: -10px;