Differenciate:- align="center" and align="middle" in HTML

Question

What's the real difference between them when they produce same output???
There are also various tags which produce the same output in HTML. Confusing😮....

Answer 1

@visp putting align="middle" works!!!

Answer 2

@visp......that's true😉😉😉

Answer 3

@Sai:

It works, but it's not valid and only working because permissivity of Html, and browsers are mandatory to try to display invalid html as well as they can, meaning they try to auto-correct invalid code, so 'align="middle"' is finally interpreted as 'style="text-align:center;"' in Html5 doctype documents ^^

Answer 4

1> 'middle' is not a valid value for 'align' attribute

2> 'align' attribute is deprecated in html5, as every tag elements related to styling

In html5 you're mandatory to use 'text-align' css property to horizontally align content inside the element (meaning that to align an element itself in its parent container, it require to be of type inline and not block, and the 'text-align' property must be applied to the parent)...

Anyway, 'middle' is only related to the css property 'vertical-align', wich doesn't act as we can expect: this one control only alignement of inline type element relatively to the line-height of the content flow inside wich is the targeted element... For vertical align a content/element inside its container, you need to use workaround technics... check this post for some ways to do it:

https://www.sololearn.com/Discuss/103382/?ref=app

Answer 5

@visph align="middle" works & gives same output as align="center"

Answer 6

They don't produce the same output because the "center" property places a tag's contents in the horizontal center while the property "middle" places a tag's contents in the vertical middle.