How to use vertically align : middle text, next to image using CSS?


I am trying to vertically align a text in the middle, next to image using the below HTML/CSS code

<div>
   <img style="width:150px;height:100px" 
src="http://webneel.com/wallpaper/sites/default/files/images/08-2013/10-india-independence-day-wallpaper.preview.jpg" />
   <span style="vertical-align:middle">Align vertically Middle.</span>
</div>

But it is not working for me, let me know how can I resolve it, here is the fiddle link


Asked by:- manish
2
: 204 At:- 8/21/2017 8:03:18 AM
HTML CSS vertical-align-middle-text image






2 Answers
profileImage Answered by:- vikas_jk

You can vertically align: middle your text next to image by applying vertical-align: middle CSS on both the elements, something like this

<div>
   <img style="width:150px;height:100px; vertical-align:middle" 
src="http://webneel.com/wallpaper/sites/default/files/images/08-2013/10-india-independence-day-wallpaper.preview.jpg" />
   <span style="vertical-align:middle">Align vertically Middle.</span>
</div>

This will work for sure.

Another solution is to use remove vertical-align from <span> and place it in <img> only

<div>
   <img style="width:150px;height:100px; vertical-align:middle" 
src="http://webneel.com/wallpaper/sites/default/files/images/08-2013/10-india-independence-day-wallpaper.preview.jpg" />
   <span>Align vertically Middle.</span>
</div>

Both works, but mostly second option is preferred. 

2
At:- 8/21/2017 8:14:07 AM
thank you, I see second method is better 0
By : manish - at :- 8/29/2017 7:38:04 AM


profileImage Answered by:- bhanu

You can align text horizontally next to image using flexbox also

Here is the demo code

div {
 display: flex;
 align-items: center;
}

HTML

<div>
   <img style="width:150px;height:100px" 
src="http://webneel.com/wallpaper/sites/default/files/images/08-2013/10-india-independence-day-wallpaper.preview.jpg" />
   <span>Align vertically Middle.</span>
</div>

It should work  as required, here is similar code fiddle

1
At:- 8/22/2017 2:52:39 PM
thanks for fiddle example, i can see it working using 'flex' 0
By : manish - at :- 8/29/2017 7:39:24 AM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use