Why does the "text-align: center" property work in image?

Asked

Viewed 547 times

7

I don’t understand why text-align: center is centering the image because this property is not used to center text? because it centralizes the image too? I created an example.

@charset "utf-8";

header#main-header {
    text-align: center;
}
<html>
<body>

<header id="main-header">
    <i class="fab fa-500px"></i>
    <script src="https://kit.fontawesome.com/169e513592.js"></script>
    <h1>File Manager</h1>
</header>

</body>
</html>

html css
  • 3

    Would your "<i>" be the image in this case? Because in this case, it is only an icon source so it will center as a source.

  • 1

    Sam, whoops I’ll always forget ;)

3 answers

13

It works because an image is an inline element

The property text-align works for elements that are inline, an image is an inline element, so text-align works in images. It’s as if these inline elements have the behavior of a text, even without necessarily being a text.

A remark

This kind of thing working is counterintuitive for those who are starting out. Remembering that you can modify this behavior by setting the property/value display:block for an element that is inline.

8


The image by incredible that it looks eh an inline element, as well as the label, span, input, among others, so in the image focuses properties like text-align and verticla-align for example. The model-box has some particularities compared to other inline elements, but basically eh this, it aligns with text-align Pq eh considered a textual element

  • vlw, man hadn’t even thought of that

  • @Leandronascimento a tag img eh um elemento peculiar, note that as an input it has no closing tag, but different from the label that tbm eh inline and has closing tag, because Pavel has content inside and the image the "content" comes from an external resource "src" that eh the external file link. Was worth the force

4

A common task in CSS is the centralization of text and images.

1) Center text lines:

Centering text titles or paragraphs is the simplest and most common centralization task. Just use the text-align CSS property as shown below:

P { text-align: center }
H2 { text-align: center }

The CSS rules shown render each horizontal-centered line of P or H2.

2) Center a block of text or an image:

Another task of centralization is to center not a text, but a block as a whole. Put another way: set left and right margins equal to a block. To get this effect we use the'auto' value for the margin property. It is necessary that the block has a fixed width, because in the case of flexible blocks it will assume the total width available. Note the following example:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P class="blocktext">Esse bloco de texto...

This is also the technique used to center an image: set the block level for the image and the auto value for the left and right margins, as shown below:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

In summary, although suggestive, text-align aligns objects and not only text.

I hope I’ve helped

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.