Vertical-align examples

Developer
Chris Coyier
Size
1,819 Kb
Views
18,216
  1. Vertical-align examples Previews
  2. Vertical-align examples HTML Codes
  3. Vertical-align examples CSS Codes

How do I make an vertical-align examples?

For the CSS-Tricks almanac. What is a vertical-align examples? How do you make a vertical-align examples? This script and codes were developed by Chris Coyier on 18 November 2022, Friday.

Vertical-align examples Previews
IQ Test

Vertical-align examples - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>vertical-align examples</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="middle"> <h2>Middle</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="top"> <h2>Top</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="bottom"> <h2>Bottom</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="sub"> <h2>Sub</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="super"> <h2>Super</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="text-top"> <h2>Text Top</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="text-bottom"> <h2>Text Bottom</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="baseline"> <h2>Baseline</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="pixel"> <h2>30px</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div>
<div class="percentage"> <h2>-500%</h2> <img src="http://placekitten.com/100/100"> <img src="http://placekitten.com/200/150"> <img src="http://placekitten.com/220/80">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Vertical-align examples - Script Codes CSS Codes

.middle > * { vertical-align: middle;
}
.top > * { vertical-align: top;
}
.bottom > * { vertical-align: bottom;
}
.sub > * { vertical-align: sub;
}
.super > * { vertical-align: super;
}
.text-top > * { vertical-align: text-top;
}
.text-bottom > * { vertical-align: text-bottom;
}
.baseline > * { vertical-align: baseline;
}
.pixel > * { vertical-align: 30px;
}
.percentage > * { vertical-align: -500%;
}
body { padding: 20px; background: #eee;
}
h2 { display: inline-block; margin: 0; width: 150px; text-align: right; font: bold 20px Sans-Serif;
}
div { margin: 0 0 30px 0; padding: 10px; background: white; white-space: nowrap;
}
Vertical-align examples - Script Codes
Vertical-align examples - Script Codes
Home Page Home
Developer Chris Coyier
Username chriscoyier
Uploaded November 18, 2022
Rating 3.5
Size 1,819 Kb
Views 18,216
Do you need developer help for Vertical-align examples?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Coyier (chriscoyier) Script Codes
Name
JQuery and CoffeeScript
A Pen by Chris Coyier
Bar Navigation with Flexbox and SVG icons
Glowing Blue Inputs
Transformer Tabs
Row and Column Highlighting with CSS Only
CssPanelMenu
Complex Text Shadow Examples
Centering in the Unknown
Smooth Page Scrolling in jQuery
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!