Register now or log in to join your professional community.
display:table will work if you need the children of the HTML element behave as if they are in a cell table. You can achieve a true vertical alignment for elements with dynamic height.
Example:
<div style="display:table;"><div style="display:table-cell; vertical-align: middle;">Test</div>
But usually table layouts are not preferable. There is another way to do it:
<div><div style="position: relative; top: 50%; transform: translateY(-50%);">Test</div>
disblay: inline is the default value for elements except for a few such table, div, ul, ol, h1..h6, p, and section. An inline element will not accept height and width. It will be displayed as part of the text that surrounds it. Think of it as a word written in a line. The word is an integral part of that line.
display:block will make the element accept height and width. It will also have a box model properties such as padding, margin, border. If no value is specified for width, the default is to take the container's width. if no value is provided for the height, the default is to have dynamic height according to its content. It cannot be wrapped by inline-elements. It's the normal default behavior of a div for example.
display:inline-block will make the element behave as if it has its display property set to block meaning that it will have a box model, width and height but it will be wrapped in inline elements. I mean it will be displayed within the inline content. Think of it as span or img vs div.
a good article for inline-block
There is a significant difference in the actual display of the element. display:block will extend to 100% of the available space, while display:table; will only be as wide as its contents.inline elements can be wrapped around text and used for styling but won't affect the position of the text as such.inline-blocks on the other hand can have dimensions like block boxes but will shrink to fit the content rather than stretching full width as block boxes do. It allows for a series of block elements to behave as though they were on the same line
Please click on this link and it will help you a lot
https://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell
display: table - lets the element behave like a <table> element
display: block - displays the element as a block element, like a <p> tag
display: inline-block - displays an element as an inline-block level container. The inside of this block is formatted as a block-level box, and the element itself is formatted as an inline-level box
display: inline - displays an element as an inline element, like a <span> tag
Here is an easy and complet article about this topic.
Block level elements always begins on a new line and takes up the full width available, i.e. if you donot set the height and width of a block level element it will take up the whole width of the page.
Example of Block level elements are <div>,<h1>-<h6>,<p> etc
Inline elements does not begin on a new line and takes up as much space as required.
Example of Inline elements are <span>,<img>,<a>
Inline Block elements does not begin on a new line but also has Block level characteristics this means that we can manually set the width and height of the element and can still have them appear next to each other.
For more information on this topic refer:
Display:table -> will make your tag behave like a table.
Display:block -> respect all of those and force a line break after the block element.
Display:inline-block -> allow other elements to sit to their left and right and respect top & bottom margins and padding and respect height and width
Display:inline-block -> respect left & right margins and padding, but not top & bottom and cannot have a width and height set and allow other elements to sit to their left and right.
