Web Development

Aligning Techniques in CSS

Aligning Techniques in CSS is the section 19 of Beginner’s Guide to CSS.

Before going further on, we recommend you to go for refresh your memory on block elements, because what we’re going to do is aligning block elements horizontally. We discussed about block elements in Layout Your Webpage section of our HTML tutorial. Main purpose of aligning block elements is to layout the webpage. This is not like aligning text. So don’t get confused with this section with the text aligning section.

We are going to use various properties we had learned up to now through this CSS tutorial to come up with the horizontal alignment.

Margin

Block elements can be center-aligned by setting the left and right margins to “auto”. Setting margin as like that specifies that they should split the available margin equally. Output you will see is center aligned element. If you are out of memory from margins, refresh your memory from our Margin section in the tutorial.

Again, you can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.

– Steve Jobs –

[code language=”css”] div {
margin: auto;
width: 70%;
background-color: #b0e0e6;
}
[/code]

See how the blue colored division box in the horizontally centered in the page.

 

Position

With absolute positioning you can do the horizontal alignment. Absolute positioned elements are removed from the normal flow, and can overlap elements. Guess that you know about position property. If not upgrade your brain by visiting out Position section of our tutorial. 

See how the blue colored division box aligned into left of the page.

The brick walls are there for a reason. The brick walls are not there to keep us out; the brick walls are there to give us a chance to show how badly we want something. The brick walls are there to stop the people who don’t want it badly enough. They are there to stop the other people!

– Randy Pausch –

[code language=”css”] div{
position: absolute;
left: 0px;
width: 300px;
background-color: #b0e0e6;
}
[/code]

Float

This is another way of aligning elements horizontally.

I believe in intuition and inspiration. … At times I feel certain I am right while not knowing the reason. Imagination is more important than knowledge. For knowledge is limited, whereas imagination embraces the entire world, stimulating progress, giving birth to evolution. It is, strictly speaking, a real factor in scientific research.

– Albert Einstein –

See how the blue colored division box aligned into the right of the page.

[code language=”css”] div{
float: right;
width: 300px;
background-color: #b0e0e6;
}
[/code]

Browser Compatibility

When aligning elements like this way, it is always a good idea to predefine margin and padding for the element to avoid visual differences in different browsers.


In this section we actually didn’t look into something new. But we discussed few of already learned properties’ usage in horizontal alignment. In the next section we are dig deep into CSS selectors.

WHAT’S NEXT?

Let’s learn what is Combinator in CSS.

 

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW