Intro to CSS: Alignment

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>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;
}

Clear

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

      div {
          clear: left;
      }