Menu
I want to vertically align a span after a floated image. I searched for it in stack overflow and find this post. but my image is floated.
<div> <img style="width:30px;height:30px; float:left"> <span style="vertical-align:middle">Doesn't work.</span> </div> I give vertical-align:middle to image and nothing change!
Thanks
514
We can also vertically align the text next to the image using flexbox. Use display: flex property of CSS and combine it with the align-items: center property.
For this, we will use CSS display property combined with align-items property. We need to create a parent element that contain both image and text. After declaring the parent element as flexbox using display: flex; we can align the items to the center using align-items: center;.
Put the display property and choose the "flex" value. It will represent the element as a block-level-flex container. Use the align-items property with the "center" value to place the items at the center of the container. Set the justify-content property to "center". Put the image’s maximum width to 100% with the max-width property.
Set the justify-content property to "center". Put the image’s maximum width to 100% with the max-width property. Set the flex-basis property of the "image" class to specify the initial main size of your image. Choose the font size of your text with the help of the font-size property.
Even though this is an extremely old post, you can achieve this using Flexbox:
div { display: flex; align-items: center; }<div> <img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" /> <span>Doesn't work.</span> </div>JsFiddle example
136
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
