Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Alignment

Depending on the properties assigned to your box elements, you can quite often end up with boxes that don’t stretch to fill the entire width or height of the parent and, as a result, empty spaces. Whether that empty space appears horizontally or vertically depends on the parent’s box-orient value, but where that space appears in relation to the children can be set on the parent by using the box-align property. Here’s the syntax:

E { box-align: keyword; }

keyword has a number of possible values. The default is stretch, which gives you the behavior you’ve already seen in this chapter, increasing the element’s height or width to fill its parent. The start keyword places the element at the left of its parent if box-orient is set to horizontal or at the top if set to vertical; similarly, the end keyword places the element to the right if horizontal and to the bottom if vertical. If the value is center, the element is given equal space on both sides either horizontally or vertically, again depending on the box-orient value.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint