CSS is a mighty beast, and an integral part of any self-respecting web site. After all, this power comes a lot of different tricks you can use to accomplish the mission. Some of the tricks associated with the placement of content, and today we are going to do with it. This tutorial we are going to reveal some of the best ways to center the content when the content may be.
There are many ways the center of your content using CSS. Some are a little further forward than the other channel, but fortunately they are all relatively simple to implement. At the end of this tutorial, you should be able to do something like this:
I'm focused!
Center Horizontally
One of the easiest ways you can use elements of the center is the text-align: center on the package contents. For example:
I am Centered...
As you can see we use the property text-align both the content and packaging. It is because we center the text on the parent div that will be inherent inner div. So we must adapt our text inside div to the left. It is easy to implement, but not perfect.
We can indeed use the margins to the horizontal center of things as well. But when you use the margins, we generally have a content container that has a defined size. Sometimes you even have to give your wrapper contained an exact size, as well. For the first example, we started with the worst:
Again Centered...
As you can see that we have to give us both the packaging and the width of our container. Because we all know the numbers, we can do some 'math to reach our goal. We are half the width of the pack, which is 200 pixels, subtract half the width of the content. This gives us a margin of 150 pixels, which is the central fact in full. Although this is strictly forward and ensures that the content is at the center no matter what the width of our wrapper, it is an easier way.
This method consists in the margins of automobiles, which means that the CSS margins are calculated for us. In this case, we still have to give our content contains a wide range of ... but our package. This means that our budget can be any size you want. In addition, we can shorten the margin up / down left / right as well.
Atlast I Am focused...
This is usually the preferred method to center the content, but there is a problem. If you are looking for a good match, you must go to the text with the alignment method, such as automatic margins are not supported by all browsers. All modern browsers support auto margins, but not only in older browsers.
If you feel adventurous, try our latest example of the horizontal center. It is "relatively" the positioning of the contents of our container, and then move a little. This is what it would look like:
I'm focused!
Here we take the content and the relative position of it. This allows us to use the property left to move the content around us, which we used for the left: 50%. This will move the content, but not centralized, as the top left hand pointing to the center of the contents of the container, moves to the right. To satisfy this, as the first example, the margin is calculated half-width of our content, but this time we are reducing the current drive. The end result is a central content.
So those are the main ways to get in half horizontally and CSS. There are other tricks you can do things, but these methods are the most common, and in the case of the first two, the most dynamic. However, there is a trick to get things centered vertically.
Center Vertically
This is where the trick There are two ways to focus your content vertically on the page. But before you dig I want to emphasize that both methods require your content for a specified height. There are several ways to focus on content without having to adjust the height, but they showed a lack of compatibility between browsers. These two routes are your best paris.
The first way is exactly the same concept as our last example horizontally, except suitable for the vertical position. It looks like this:
I'm focused!
As you can see that the same basic concept. You respect the position of the content in the middle, then offset by half its height. It works in virtually any browser, you will meet, and is simple to implement. A good solution, but that's another way of doing things.
This solution is a bit strange at first, but it is the best way to center the content vertically. That said, it is a sensitive issue. Using a floating div to force the contents in the center of the page, and we all know that things float can be a pain at times. Fortunately, implementation is very simple:
The Centered!
So now we have this new arc, which can be called at the end float guide our container contents, a vertical center of the page. As long be remembered as the "clear" the entire contents of the container works as expected. To make things better, this method is said to be a very wise browser compatible, which means that it works with IE 5
While there are all sorts of crazy ways to center the content vertically, if you just want some centered text. Of course, you can use one of the solutions above, but this seems a little bit exaggerated. Well, it was our secret third option comes into play.
I'm focused!
This is one of the center line of the text, and I want to stress one. I'm sure you've noticed that the key to this method is the line height, which makes every line of text a certain height. This means that if the text is wrapped, the following line is 50 pixels high. This makes it a good solution if you need a quick solution for a line of text, but something else later.
So this is a set of techniques are the best solutions for centering content, then x and y planes They are simple to use, and get the job done. This concludes this tutorial, but just remember, when you need help coding have to do is connect the Code.
No comments:
Post a Comment