CODEWITHSUNDEEP
htmlcss
user3537336
user3537336

Reputation: 221

HTML text-align property works on HTML objects that aren't text?

I'm an entry-level web developer and I'm trying to make sure I understand the HTML "logic" (if there is any) behind everything I do, rather than just moving forth once I've jerry-rigged my page into how I intended it to look.

For instance, I wanted a textarea object to be horizontally centered inside a particular div, so I gave that div the property text-align: center;, which I know from experience will accomplish my intended task. But I'd like to make sure I fully understand why this works.

Any answers greatly appreciated.

Upvotes: 1

Views: 68

Answers (2)

Terry
Terry

Reputation: 66208

To supplement j08691's answer, if you want to use text-align: center for horizontal centering, you will have to declare your element, say, <textarea> as an inline or inline-block element.

If you are working with a block-level element though, you can use margin: 0 auto; to achieve the same effect &mdash, in fact, just setting left and right margins to auto will also do the trick.

Upvotes: 0

j08691
j08691

Reputation: 207973

text-align is a bit of a misnomer.

As the W3 states:

This property describes how inline-level content of a block container is aligned

And MDN:

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

So as you can see, it refers to inline content, not just text. I guess inline-content-align wasn't as catchy.

Upvotes: 5

Related Questions