To horizontally center a block element (like <div>), use margin: auto;
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins. Continue reading CSS Layout – Align
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with
display: inline-blockdisplay: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
The display property is the most important CSS property for controlling layout.
The display property is used to specify how an element is shown on a web page.
Every HTML element has a default display value, depending on what type of element it is. The default display value for most elements is block or inline.
The display property is used to change the default display behavior of HTML elements.
A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
Examples of block-level elements:
An inline element DOES NOT start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements: