Menu
How can I vertically center text that is wrapped in a <span>? The <span> must have min-height of 45px. Here is what I am envisioning:
-------- ------- text ---> text -------- ------- I tried vertical-align as well as methods from this article. None of them worked
215
To vertically center text within an element, you can also use the CSS line-height property. You'll have to set the property with a value that is equal to the container element's height.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
Try using flexbox, all modern browsers support it, with prefixes it also works in IE10.
span { min-height: 100px; display: inline-flex; align-items: center; border: 1px solid aqua; }<span>vertical center</span>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
