...

Centered

Centered

Paragraph text.

. But Internet Explorer and Opera also align the content of these elements.

Description

Aligns a block of text to the edge.

Styles must be used instead of this attribute

Syntax

Values

left Aligns the text to the left. In this case, the lines of text are aligned to the left, and the right edge is located in a "ladder". This alignment method is the most popular on websites, because it allows the user to easily look for a new line and comfortably read large text. center Aligns the text to the center. The text is placed horizontally in the browser window or container where the text block is located. Lines of text seem to be strung on an invisible axis that runs through the center of the web page. A similar alignment method is actively used in headings and various captions, such as captions, it gives an official and solid look to the design of the text. In all other cases, center alignment is rarely used for the reason that it is inconvenient to read a large amount of such text. right Aligns text to the right. This alignment method acts as an antagonist to the previous type. Namely, the lines of text are aligned to the right, while the left remains "ragged". Due to the fact that the left edge is not aligned, namely, from which new lines are read, such text is more difficult to read than if it were left-aligned. Therefore, right-alignment is usually used for short headings of no more than three lines. We do not consider specific sites where the text has to be read from right to left, where a similar alignment method may come in handy. But where in our country have you seen such sites. justify Justify, which means left and right justified at the same time. To perform this action, the browser in this case adds spaces between words.

Default value

Example. Text alignment

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.

Browsers: Desktop Mobile ?

Internet Explorer	Chrome	Opera	safari	Firefox
1	1	1	1	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Browsers

The following notation is used in the browser table.

• - the element is fully supported by the browser;
• - the element is not perceived by the browser and is ignored;
• - various errors may occur during operation, or the element is supported with reservations.

The number indicates the browser version from which the element is supported.

As you know, Habr uses "old-school" tag attributes that allow formatting of text and pictures in articles and comments by authors. Among these tags was one that is not in the W3C standards. This - . It turned out that some of the authors "naively" use this attribute, because Habr's editor simply does not provide another. Oddly enough, in some browsers this attribute is supported on Habré, although experiments with clean test pages show that there are no miracles, it does not work in img.

I was interested in the question in which cases the attribute is supported and what needs to be added in the styles so that it starts to be supported everywhere. If it worked on the site, we would support the naive opinion that this is the right attribute, but still get a tool for centering pictures.

In fact, the align="center" attribute in HTML is for block-level elements (div, p, ...) and does not refer to them themselves, but to the inner content of the element. Therefore, if we write

then centering will work (this is shown below on the test page with alt=" pic-under-test!}").

But this cannot be written in Habré, these are the rules of the tag parser.

To check how it works on Habré, you can use the preview when writing a comment or in a draft article. This will not exactly match the final look, but you can use it for tests.

Here's what we'll see:

In most browsers, except for Firefox, the second image is centered (if Habr's styles haven't been fixed yet), although tests show that this attribute is not supported by browsers (except for rare exceptions with doctypes).
Why doesn't this wrong text work everywhere, but it works on Habré, and not in Firefox?

UPD Jan 25 2013(in a year):

Looking at the styles of the drawing, we find the reason.
img ( display: block; margin: 0 auto !important; )
Yes, on Habré, in the all.css file, this trick of turning an incorrect attribute into a “correct” one is supported. It is these properties that a picture needs to have in order to start centering - be a block and centered style margin: 0 auto;.

(But those who know that there is no such attribute cannot guess for themselves that it works on Habré - there is no documentation, the test in Fx does not pass. For example, I purely accidentally found out about its existence when I saw aleksandrIt in the notes (almost in each annotation) by looking through Chrome.)

It remains to figure out why centering does not work in Firefox.

The trick is to look at the styles too (with the help of Firebug). Here we find that the attribute miraculously changed to align="middle" and even manual renaming does not help fix it. The browser itself changes the wrong attribute to, “in its opinion”, the most appropriate one (vertical alignment in the stream of inline elements). Therefore, the img style rule stops working.

Therefore, for full browser support on Habré, there is not enough rule:
img, img( display: block; margin: 0 auto !important; )

Blank page test with attributes

To see a test page for checking the img align="center" attribute in different browsers, visit the link spmbt.kodingen.com/habrahabr/testImgAlignCenter.htm . In Firefox it will look something like this, in other browsers it will look a little different. Pictures and blocks are colored to make them stand out better. There are no real pictures to watch the captions in ALT.

First we will see a bluish block under the inscription "Main test" Empty rice." with the desired attribute and the attribute failing in the image, which makes perfect sense.
With a single click on the “Enable Correction Styles” link, you can see the style rules we received are applied so that centering starts working in all browsers.

Technical notes. The special look of the addRules() styling function comes from the desire to enable script execution in the IE8 browser. (Untested in IE9, but should work as in others.) Without the doctype, margin: 0 auto won't work in IE8, but the align:right and left attributes will.

What to do?

Such a rule was written specifically for editing the error in the Habr ZenComment styles and, independently of them, in the HabrAjax script (Habr-ajax), after which the centering with the align="center" attribute began to work correctly in all browsers.

For conclusions in general, it must be said that one should not support the opinion among webmasters that this attribute can work in IMG tags. While the days of attributes are over and everyone is using styles, some inexperienced web builders may be left with the impression that such an attribute exists.

UPD Jan 25 2013(in a year): It turned out that Habr's styles no longer support this wrong attribute. To use it on the site, I had to add user styles in the same way as it was done for Firefox before.

For images, you can specify their position relative to text or other images on a web page. Image alignment is specified by the align attribute.

This attribute is deprecated, use styles instead.

Syntax

Values

In table. 1 lists the possible values ​​for the align attribute and the result of using it.

Tab. 1. Using align attribute values

Meaning	Description	Example
bottom	Aligns the bottom border of the image with the surrounding text.
left	Aligns the image to the left edge of the window.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
middle	Aligns the middle of the image with the baseline of the current line.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
right	Aligns the image to the right edge of the window.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	The top border of the image is aligned with the highest element of the current line.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Default value

Example

This text wraps around the picture along its left edge.

Browsers

The following notation is used in the browser table.

• - the element is fully supported by the browser;
• - the element is not perceived by the browser and is ignored;
• - various errors may occur during operation, or the element is supported with reservations.

The number indicates the browser version from which the element is supported.