Vertical align of element

selectors
Tags: #<Tag:0x00007f166bb4d768>

#1

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).


#2

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.


#3

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.


#4

Thank you for reply.


#5

Thank you too