.

The align attribute is quite versatile and can be applied not only to body text, but also to headings like

. Example 1 shows how to set the alignment in such a case.

Example 1: Text Alignment

How to catch a lion?

enumeration method

We divide the desert into a number of elementary sections, the size of which coincides with the overall dimensions of the lion, but is smaller than the size of the cage. Next, by simple enumeration, we determine the area in which the lion is located, which automatically leads to its capture.

dichotomy method

We divide the desert into two halves. In one part there is a lion, in the other there is none. We take the half in which the lion is located, and divide it in half again. So we repeat until the lion is caught.

The result of the example is shown in Fig. one.

Rice. 1. Align text to the right and left

In this example, the heading is aligned to the center of the browser window, the selected paragraph is right-aligned, and the body text is left-aligned.

In this article, we will look at how to align an image to the right and left using css on the site.

how to right align image in css

The "float:right" property is used to right-align the image. The float property changes the view of the image (or other element) to block, but with peculiarities: it becomes invisible for other block elements, but at the same time retains visibility for lowercase (display: inline) elements that wrap around it.

This feature allows you to align the image to the right and left in css, as well as other elements to the edge without the use of tables and a lot of extra code. Detailed information on how this property works can be found in search engines for "float css".

When the image has shifted, the text and other elements begin to wrap around it closely and in many cases it looks ugly, so they add margins using the "margin y1 x1 y2 x2" property. The values ​​"y1 x1 y2 x2" are the top, right, bottom and left padding respectively.

Incorrect display of floating float elements

As mentioned above, float elements are not taken into account because they are invisible to block tags, so incorrect display is possible:

1 case: the float element extends beyond the boundaries of the parent layer.

2 case: The title and other content in a block element is not displayed on a new line, but begins to wrap around the parent with type float .

How to fix incorrect display of floating float elements

To solve the problem described above, you need to specify the boundaries of the completion of the floating element. Since floating elements are invisible to block elements, you need to use an additional tag that will not wrap around them.

In css there is a clear property responsible for preventing float elements from wrapping around. The clear property shifts the element immediately below the float, thereby setting the bottom border and, if necessary, expanding the parent block to the end of all float tags.

You can use any block tag as a border expander with clear.

The clear property can take the following values:

• none- enable flow;
• left- prohibition of flow on the left side;
• right- prohibition of flow on the right side;
• both- prohibition of flow on both sides.

The most common tag used to extend a border to the end of a floating block is
, you can also use

no internal content.

left align image in css

You can align an image to the left edge in css, just like to the right, only instead of float: right , float: left is written, and instead of indent from the left edge, indent from the right is set using the margin property.

Examples

An example of html code for right-aligning an image in css (clear is not needed)

Result in browser

Page code (the clear property is not needed)

In the example above, the image is pressed to the right edge and has a left margin of 15 px.

Example html code how to right-align an image in css (clear is needed to expand the border)

Result in browser

In the example above, the property "border:4px solid #cccccc;" means to make the border 4px thick and color #cccccc and padding:10px is the padding of the div tag by 10px.

An example of html code how to align an image to the left in css (clear is needed to expand the border)

Result in browser

Page code (with clear property)

Birds

Fish

You can place text here...

In the example above, the image is pressed to the left and has a 15 px padding on the top and right.

Until some time, I, like many of you, used two methods:

1. The first way is based on the float property. The left block is set to float: left, the right block is set to float: right
2. The second way is to position the right block absolutely, with the parameters right: 0 or left: 100%, margin-left: -(block width)

The main drawback of both methods is that if the blocks need to be aligned along the bottom border or along the middle line relative to each other, then the blocks have to be shifted vertically by the selection method, setting them either top: anyValue or margin-top: anyValue. And the first method, plus everything, has one more, not so much a drawback, but an unpleasant trifle. This is the need to clear the flow with clearFix "a, overflow or an additional div.
So method number 3. First, the code:

Proper HTML

copy source | Copy HTML

1. < div class ="wrap">
2. < div class ="left">< a href ="#">Left block< div class ="right">< a href ="#">right block

Proper CSS

copy source | Copy HTML

1. .wrap(
2. width : 500px
3. background : #555 ;
4. height : 500px ;
5. .left , .right (
6. display : inline -block ;
7. //display: inline;
8. // zoom: 1;
9. width : 100%
10. margin-right : -100% ;
11. vertical-align : bottom ;
12. .right(
13. text-align : right ;
14. .left a , .right a ( display : inline -block ; position : relative ; )
15. .left a ( width : 200px ; height : 100px ; background : green ; )
16. .right a ( width : 100px ; height : 200px ; background : pink ; )

Explanations

The essence of the method is to overlay the blocks on top of each other using margin-right: -100% and align the contents of the right block to the right using text-align: right.
It is advisable to write both blocks (right and left) on one line, otherwise, due to the line break character, the right block will slightly crawl out of the boundaries of the parent block.
Links must be set to position: relative, otherwise, due to overlapping blocks, some may be unclickable.

Advantages of the method

The main plus is that vertical-align now starts working for our blocks. And we can easily align them both on the top border and on the bottom and in the center.

Cons of the method

And the main disadvantage is that, using this method, we must be firmly convinced that the contents of the blocks will not increase to such an extent that they begin to overlap each other (by the way, the method with floats is devoid of this drawback, since when increasing the contents of the blocks, they will stand under each other).

P.S.

I have not seen such a method on the Internet, therefore, please: if someone finds a similar article published earlier, please let me know.

Upd.

In the comments, my attention was drawn to the method using text-align: justify. This method is also good, but it has two drawbacks. First, it requires an additional element to emulate the last line of a text block, and second, it won't work in IE6-IE7 for block-level elements.