I suggest develop an vertical align for block or inline-block elements for centered between top and bottom block or inline-block neighbour. Or maybe exist another solution? (exept position and margin).
The other solution would be Flexbox. align-items: center
centers all child items on the secondary (vertical by default) axis.
A Hack for centering the content of inline elements is using the <button>
tag with vertical-align: middle
.
That’s already specified in the CSS Box Alignment Module Level 3. The align-items
property mentioned by @sbaechler already applies to all elements, also the related justify-*
properties and the other align-*
properties are defined to apply to block containers.
The browsers just didn’t implement those properties for block containers yet. Though, as @sbaechler already said, for now you can use them on flex and grid containers.
Thank you for reply.
Thank you too