HTML/CSS/Box Model/vertical align
Содержание
- 1 Aligned to baseline, lowered to baseline and raised to baseline
- 2 text vertical align top and bottom
- 3 The image is vertically aligned using the value baseline
- 4 The image is vertically aligned using the value middle
- 5 The image is vertically aligned using the value sub
- 6 The image is vertically aligned using the value super
- 7 The image is vertically aligned using the value text-bottom
- 8 The image is vertically aligned using the value text-top
- 9 The image is vertically aligned using the value top
- 10 The length is offset from the bottom of the line-height.
- 11 The percentage value is a percentage of the line-height value
- 12 The text-top and text-bottom keyword align to the tallest and lowest character, respectively.
- 13 vertical align 100 percent
- 14 vertical align 20px
- 15 vertical-align: 300%
- 16 vertical align: bottom
- 17 Vertical align elements of different heights
- 18 vertical-align: middle
- 19 vertical align: sub
- 20 vertical align: super
- 21 Vertical-align: text-top
Aligned to baseline, lowered to baseline and raised to baseline
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" title="text/css"> .parent{
width: 600px; height: 600px; background: gray;
}
- .baseline {
vertical-align: baseline; background: black; color: white;
}
- .raised {
vertical-align: 10px; background: red;
}
- .lowered {
vertical-align: -10px; blackground: yellow;
} </style> </head> <body>
Aligned to baseline. Lowered relative to the baseline. Raised relative to...
</body> </html>
</source>
text vertical align top and bottom
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { background: cyan; margin: 10px; font-size: 16px; } span { font-weight: bold; background: lightblue; } span > span { font-size: 40px; color: white; background: steelblue; } span + span { font-size: 20px; } span#text-top { vertical-align: text-top; } span#top { vertical-align: top; } span#text-bottom { vertical-align: text-bottom; } span#bottom { vertical-align: bottom; } </style> </head> <body>
A A A.
A A A
</body> </html> </source>
The image is vertically aligned using the value baseline
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {
font: 12pt arial;
} img.baseline {
vertical-align: baseline;
} </style> </head> <body>
<img class="baseline" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value baseline
</body> </html>
</source>
The image is vertically aligned using the value middle
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {
font: 12pt arial;
}
img.middle {
vertical-align: middle;
} </style> </head> <body>
<img class="middle" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value middle
</body> </html>
</source>
The image is vertically aligned using the value sub
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {
font: 12pt arial;
} img.sub {
vertical-align: sub;
}
</style> </head> <body>
<img class="sub" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value sub
</body> </html>
</source>
The image is vertically aligned using the value super
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {
font: 12pt arial;
} img.super {
vertical-align: super;
} </style> </head> <body>
<img class="super" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value super
</body> </html>
</source>
The image is vertically aligned using the value text-bottom
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {
font: 12pt arial;
} img.text-bottom {
vertical-align: text-bottom;
} </style> </head> <body>
<img class="text-bottom" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value text-bottom
</body> </html>
</source>
The image is vertically aligned using the value text-top
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {
font: 12pt arial;
} img.text-top {
vertical-align: text-top;
} </style> </head> <body>
<img class="text-top" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value text-top
</body> </html>
</source>
The image is vertically aligned using the value top
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> p {
font: 12pt arial;
}
img.top {
vertical-align: top;
}
</style> </head> <body>
<img class="top" src="http://www.wbex.ru/style/logo.png" alt="plane" width="74" height="74" /> The image is vertically aligned using the value text-bottom
</body> </html>
</source>
The length is offset from the bottom of the line-height.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>vertical-align</title> <style rel="stylesheet" type="text/css"> p { font: 12px sans-serif; } span.line { border: 1px solid rgb(200, 200, 200); background: rgb(244, 244, 244); font-size: 100px; } span.line span { vertical-align: 300%; font-size: 20px; background: white; border: 1px solid black; } span#length { vertical-align: 46px; } </style> </head> <body>
CSS 46px
</body> </html> </source>
The percentage value is a percentage of the line-height value
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>vertical-align</title> <style rel="stylesheet" type="text/css"> p { font: 12px sans-serif; } span.line { border: 1px solid rgb(200, 200, 200); background: rgb(244, 244, 244); font-size: 100px; } span.line span { vertical-align: 300%; font-size: 20px; background: white; border: 1px solid black; } span#percentage { vertical-align: 200%; } </style> </head> <body>
CSS 200%
</body> </html> </source>
The text-top and text-bottom keyword align to the tallest and lowest character, respectively.
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>vertical-align</title> <style rel="stylesheet" type="text/css"> p { font: 12px sans-serif; } span.line { border: 1px solid rgb(200, 200, 200); background: rgb(244, 244, 244); font-size: 100px; } span.line span { vertical-align: 300%; font-size: 20px; background: white; border: 1px solid black; } span#text-bottom { vertical-align: text-bottom; } </style> </head> <body>
CSS Text Bottom
</body> </html> </source>
vertical align 100 percent
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { width: 200px; margin: 10px; padding: 10px; border: 1px solid black; font-size: 16px; } span { background: lightblue; } span > span { vertical-align: 100%; background: lightgray; } </style> </head> <body>
this is a test. this is a test. pickled peppers. this is a test. this is a test. pickled peppers? this is a test. pickled this is a test. this is a test. pickled this is a test.
</body> </html> </source>
vertical align 20px
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { width: 200px; margin: 10px; padding: 10px; border: 1px solid black; font-size: 16px; } span { vertical-align: 20px; background: lightyellow; } </style> </head> <body>
this is a test. this is a test. pickled peppers. this is a test. this is a test. pickled peppers? this is a test. this is a test. pickled peppers, this is a test. this is a test. pickled picked?
</body> </html> </source>
vertical-align: 300%
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>vertical-align</title> <style rel="stylesheet" type="text/css">
p {
font: 12px sans-serif;
} p#control {
font-size: 100px; margin: 5px 0;
} p#control span {
border: 1px solid rgb(200, 200, 200); background: rgb(244, 244, 244);
} p#control span span {
vertical-align: 300%; font-size: 20px; background: white; border: 1px solid black;
}
</style> </head> <body>
this is a test.
Nn Oo Pp 300%
</body>
</html>
</source>
vertical align: bottom
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { width: 200px; margin: 10px; padding: 10px; border: 1px solid black; font-size: 16px; } span { vertical-align: bottom; background: lightyellow; } </style> </head> <body>
this is a test. this is a test. pickled . this is a test. this is a test. pickled ? this is a test. this is a test. pickled , this is a test. this is a test. pickled ?
</body> </html> </source>
Vertical align elements of different heights
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vertical-align an element of unknown height</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .outer {
position:relative; display:table; height: 200px; width: 200px; vertical-align: middle; text-align: center; background:#ccc; float:left
} .inner {
width:100%; display:table-cell; vertical-align:bottom; position:relative;
} p{
background:#aaa;
} </style> </head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
vertical-align: middle
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { margin: 10px; font-size: 40px; } span { background: lightblue; } span.valign { font-size: 16px; color: white; background: steelblue; font-weight: bold; } span#middle { vertical-align: middle; } span#text-bottom { vertical-align: text-bottom; } </style> </head> <body>
where"s the peck of pickled peppers Peter Piper picked?
</body> </html> </source>
vertical align: sub
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { font-size: 16px; } span { font-size: 0.8em; } p#sub span { vertical-align: sub; } </style> </head> <body>
This is normal text. This is subscript text. This is normal text.
</body> </html> </source>
vertical align: super
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html> <head> <title></title> <style type="text/css"> p { font-size: 16px; } span { font-size: 0.8em; } p#super span { vertical-align: super; } </style> </head> <body>
This is normal text. This is superscript text. This is normal text.
</body> </html> </source>
Vertical-align: text-top
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> div {
font-size: 60px; line-height: normal; border: 1px solid black;
}
- .text {
font-size: 18px;
}
- .text-top {
vertical-align: text-top;
} </style> </head> <body>
<img class="text-top" src="http://www.wbex.ru/style/logo.png" alt="bar" /> text-top
</body> </html>
</source>