Can the text align-property only be used to align text or can we use it to align other content as well?

Question

Can the text align-property only be used to align text or can we use it to align other content as well?

Answer

The text-align property is used to align the inner content of a block element. This means that in addition to aligning text, it can also be used to align inline or inline-block elements within a containing div.

You will learn more about inline, inline-block, and block level elements in the next exercise.

18 Likes

text-align: justify; what this command does?

4 Likes

for that we have documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

it gives both an explanation and an example you can play with, the combination of this should make it clear? Learning to read and understand documentation is a very good skill to have as programmer

34 Likes

in the asignments for this topic it is written the following below:

he text-align property can be set to one of the following three values:

  1. left — aligns text to the left hand side of its parent element, which in this case is the browser.

i wonder how can a browser be considered a parent? i mean a browser is not html-element right

1 Like

A browser (like Firefox and chrome) have a default stylesheet, which align the text to the left and other things.

4 Likes

yes but when i think of it i view it as for instance let’s say:
we have an (div) bla bla (/div) (couldn’t type in divtags it actually worked so i left out the <)element or whatever as the parent element, wouldn’t that mean that the text will be to the left of whatever is contained in the div?
whilst in case of a browser how does the text be aigned to the left of the browser since the text is to appear on the browser?

the browser is perfectly capable of setting some defaults (like aligning text to the left), very likely done through css.

Given that the browser has to render everything, surely its capable of doing something under the hood.

1 Like

i think you misunderstood my question, since the instructions said that the browser will align the text to the left of the browser! i mean that seems impossible because the text of any webpage is shown in a web-browser such as mozilla firefox, google chrome , internet explorer & safari etc. if we for example have symbolise the browser with these to signs | browser symbole | then to align text to the left of the browser would be something like this: “text that is left of the browser” | browser symbole |

if text was left of the browser it would be in some other program or desktop that is not the browser or are they trying to say that the text is to be scrolled so that if the browser is rendered at some point the other text will be achieved by scrolling to the left?

The lesson url that is in the FAQ seems broken, do you have the correct one for me?

So your point is, that the text should say: left-hand side of the browser? Actually, that isn’t even accurate. Its the left hand side of the element the text is in

1 Like

Is there a reason why elements other than text can be aligned only when contained in a div? Or am I reading the explanation wrong?

text-align is one of many css properties. We can position pretty much every element in many ways

1 Like

Hi illpro1, I think you may have misread or misunderstood the text of explanation in the lesson. I am talking about this part

The text-align property can be set to one of the following three values: left — aligns text to the left hand side of its parent element, which in this case is the browser. Ok. This is not saying to the left of the browser window or the HTML page itself. If no ‘text-align’ rule is put in a .css file then by default the browser will align things to the left side of the browser window or view screen or however you like to think about viewing/looking at a web-page. You can prove this to yourself by making a simple HTML file using the <h>A Test</h>then displaying it your browser of choice. It’s when you as the writer or author or maker of the web-page would like to have some header or paragraph or some other kind of element to appear lined up on the page somewhere else other than the left side is when you use the a text-align to place where you or your customer/client/friend wants it. I really hope this helps clear up the purpose of the text-align property as it is used in CSS files. Oh, and by the way I fully understand what you mean when you say how can the browser be considered the parent. To my mind the browser program isn’t the ‘parent’ in a relational sense to any web-page/web-site. It is the program that displays the contents of the web-page/web-site. The only way I can wrap my mind around it as a ‘parent’ is to think in terms of containers(think of a boxes within boxes) and in this case the browser is kind of like the parent container and the operating system(windows,linux,etc.) is the parent of the browser program and the hardware(motherboard,memory, etc) is the parent of the operating system.
Regards, Wispring

2 Likes

Hi, how can I align a box in a specific place?

There are so many ways to achieve box alignment

you have different positions (absolute, relative, fixed). we could use margin, we can use left, top, bottom and right

there is flex, there is grid.

2 Likes

When we have left, right and center values for alignment then why need for justify? I didn’t understand the use of “justify” value

Justify aligns the contents to both the left, middle, and the right by spacing out the words/text/child elements so that they fill the page equally. So, instead of moving everything over to the left, moving everything over to the right, or moving everything towards the midline/middle of the parent container, it spreads the contents out to the sides of the container and middle, evenly throughout.