d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="intro">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>YUI Grids makes it easy to align units in various ways, using basic CSS properties.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="example newwindow">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="cssgrids-align-example.html" target="_blank" class="button">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney View Example in New Window
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Horizontal Alignment</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Sometimes is it desirable for units to be horizontally centered when taking up less than 100% of the width of the containing grid. Rather than setting the alignment for all grids, we will add an <code>ID</code> to target the specific content being aligned. For this example, the <code>ID</code> "demo" is used, but this should be tailored to your specific content.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="yui3-g" id="demo">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-3"><p>I take up 1/3 of my container.</p></div>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-3"><p>I take up 1/3 of my container.</p></div>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Using the CSS <code>text-align</code> property on the containing grid tells the units inside of a grid how to align. We will also reset the centering so that subsequent content is left-aligned.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney text-align: center;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#demo .yui3-u-1-3 {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney text-align: left;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Vertical Alignment</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Vertical alignment tells mixed height units how they should align relative to one another, so at least 2 units are required.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="yui3-g thumb-captions">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-3">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="#"><img width="80" height="60" src="museum.jpg">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-3">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="#"><img height="80" width="60" src="museum.jpg">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-3">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <a href="#"><img height="80" width="60" src="museum.jpg">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Each unit needs to be told how it should align using the CSS <code>vertical-align</code> property. In this case, we want them all to be bottom aligned.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney.thumb-captions .yui3-u-1-3 {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney vertical-align: bottom;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h3>Vertically Center a Single Unit</h3>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Its possible to vertically center a single unit, although a second stub unit is required for it to align with.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<div class="yui3-g" id="demo">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u align-stub"></div>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <div class="yui3-u-1-3">
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney <p>Cras porta venenatis egestas. Vestibulum pretium massa id turpis varius iaculis.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Setting the height of the stub to the desired height of the container allows the content to align with the middle of the stub, vertically centered in the container. Setting the <code>vertical-align</code> CSS property for both units tells them how to behave with repsect to the other units.</p>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#demo .align-stub {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney height: 200px;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#demo .align-stub,
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney#demo .yui-u-1-3 {
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney vertical-align: middle;
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<h5>Note:</h5>
d1c2218ce9ffb1b9bfcc6dd9deb399136a4031b6Matt Sweeney<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p>