This block element is centered on the screen. To do this, you must set the width, and margins:
.middle {
width: 50%;
margin-left: auto;
margin-right: auto;
}
These examples show the various options for text-align
This text will be default aligned within it's container. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut tortor sit amet risus facilisis tincidunt. Aenean vel massa nec purus ultrices luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed erat. In hac habitasse platea dictumst. Morbi a erat. Nam porta iaculis neque. Fusce non ipsum. Quisque cursus vehicula tellus. Nulla dui. Suspendisse pulvinar lectus ac felis. Cras vitae mi. Curabitur condimentum augue non dolor. Ut vestibulum.
This text will be centered within it's container. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut tortor sit amet risus facilisis tincidunt. Aenean vel massa nec purus ultrices luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed erat. In hac habitasse platea dictumst. Morbi a erat. Nam porta iaculis neque. Fusce non ipsum. Quisque cursus vehicula tellus. Nulla dui. Suspendisse pulvinar lectus ac felis. Cras vitae mi. Curabitur condimentum augue non dolor. Ut vestibulum.
This text will be justified within it's container. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut tortor sit amet risus facilisis tincidunt. Aenean vel massa nec purus ultrices luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed erat. In hac habitasse platea dictumst. Morbi a erat. Nam porta iaculis neque. Fusce non ipsum. Quisque cursus vehicula tellus. Nulla dui. Suspendisse pulvinar lectus ac felis. Cras vitae mi. Curabitur condimentum augue non dolor. Ut vestibulum.
This text will be right aligned within it's container. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut tortor sit amet risus facilisis tincidunt. Aenean vel massa nec purus ultrices luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed erat. In hac habitasse platea dictumst. Morbi a erat. Nam porta iaculis neque. Fusce non ipsum. Quisque cursus vehicula tellus. Nulla dui. Suspendisse pulvinar lectus ac felis. Cras vitae mi. Curabitur condimentum augue non dolor. Ut vestibulum.
This text will be left aligned within it's container. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ut tortor sit amet risus facilisis tincidunt. Aenean vel massa nec purus ultrices luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed erat. In hac habitasse platea dictumst. Morbi a erat. Nam porta iaculis neque. Fusce non ipsum. Quisque cursus vehicula tellus. Nulla dui. Suspendisse pulvinar lectus ac felis. Cras vitae mi. Curabitur condimentum augue non dolor. Ut vestibulum.
In the following examples, the image has the vertical-align property set via css.
This is some sample text to demonstrate the effect: vertical-align: baseline
This is some sample text to demonstrate the effect: vertical-align: bottom
This is some sample text to demonstrate the effect: vertical-align: middle
This is some sample text to demonstrate the effect: vertical-align: sub
This is some sample text to demonstrate the effect: vertical-align: super
This is some sample text to demonstrate the effect: vertical-align: text-bottom
This is some sample text to demonstrate the effect: vertical-align: text-top
This is some sample text to demonstrate the effect: vertical-align: top
In this example, we use the vertical-align property on inline text.
In this sentence we have some subscripted text, and some superscripted text, which are quite useful, and easy to do.