Intro to CSS: Alignment

Quick Copy Boxes





Alignment refers to the position or placement of content, relative to the web page's other content.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Text Alignment

You can use CSS to position text.

Here are the options for text-align:
 ✶ left
 ✶ right
 ✶ center
 ✶ justify
If you are unsure what these mean, check out HTML Align



h1 {
   text-align: center;
}

h1 - This CSS block is gor all h1 elements
text-align - The text will be centered.

HTML:

<h1>Bug Fighting Supplies</h1>
   

Position

You can use CSS to describe how you want an element postioned.

Here are some options for position:
✶ static (default) - Elements are displayed in the order they appear in your page's code file. Basically, nothing special is going on here.

✶ relative - An element will be displayed relative to its own regular position. Top, right, bottom, and left properties are used to alter the relative position.

✶ absolute - It is positioned relative to the element that contains it.

✶ fixed - It is fixed in the same position, relative to the web browser. It will stay put even if the user scrolls.


Realative Postion Example


.imgClass {
  position: relative;
  left: 250px;
  max-width: 300px;
}
    

Float

The float property describes elements that should be placed on a specified side of the outside container. Text and Inline Elements will wrap around the floating container.


img.right {
  float: right;
  max-width: 300px;
}

float - The im age will be positioned on the right side of itss container.
max-width - Regardless of screen size, the image will not be wider than 300px. It cn be sized smaller on smaller screens.


Clear

To avoid other elements wrapping around your floating element, use the clear property.


      div {
          clear: left;
      }
 

Play with the code in the code editor below. Don't forget to check-out the CSS tab. Also, continue working on the ad you started in CSS Color lesson.