How to vertically align both image and text in a DIV using CSS?


Tags: html,css,image

Problem :

I have an image and some text inside a div and I'd like to put the image and the text in the vertical center of the div using CSS. The problem is that I don't know how many lines of text I will have but the text and the image must be ALWAYS in the middle. For example, when there's only one line of text the div should look like this:

####################################
#  _______                         #
# |       |                        #
# |       |                        #
# | IMAGE |    text text text      #
# |       |                        #
# |_______|                        #
#                                  #
####################################

If eventually I have more lines or the height of text is larger than the height of the image then the image should be aligned, just like this:

####################################
#                                  #
#              text text text      #
#  _______     text text text      #
# |       |    text text text      #
# |       |    text text text      #
# | IMAGE |    text text text      #
# |       |    text text text      #
# |_______|    text text text      #
#              text text text      #
#              text text text      #
#                                  #
####################################

I'm in trouble to get this effect, is there any way without using javascript to do this?

Obs. The parent div of the div I'm referring to have position:relative so there's another problem.



Solution :

Give both the image and the text a vertical-align: middle - the text needs to be contained in an element that is also display: inline. So markup like this:

<div>
  <span><img src="blah.jpg" /></span>
  <span>text text text</span>
</div>

div {
  display: table;
}

img {
  vertical-align: middle;
  display: table-cell;
}
span {
  vertical-align: middle;
  display: table-cell;
}

should work. Here's a jsfiddle to demonstrate (edited fiddle to show everything is vertically aligned within a container as well.)

EDIT: to get the behavior you want, I recommend using additional display properties - table for the container and table-cell for the contained elements. Fiddle link has been updated with the changes.

EDIT: the only way I could think of to get it to work was to wrap the image in another inline container, in this case a span. I've updated the fiddle to demonstrate.


    CSS Howto..

    How to change select element's background color when it's selected?

    Show background image if container content is small (responsive)

    How to set dynamic responsive divs with only CSS (no javascript)?

    how do you link css to a jade file?

    How to change CSS li tag in Bootstrap3 navigation when in and out or responsive view?

    How to move one element to the right of another using CSS?

    How to Make Tabs In CSS?

    How can I make my web application look correct in IE 8 and 9? [closed]

    How do I refer to an image resource from CSS in grails?

    Fixed sidebar, content under it, how to fix?

    how to add class with animation?

    How to include CSS in laravel 5 running with artisan?

    How to make images go inline vs break to a new line?

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    How to animate selection / deselection in ace editor?

    CSS3 - How to “restore” ::-webkit-scrollbar property to the default scroll bar

    How to set css class for Rails date_select year select?

    How can I position two to always be side by side

    How to get a css stylesheet value that is not interpreted by the browswer?

    How to center a single character both vertically and horizontally in a square div

    How to change the Size of the ListBox of the datePicker in GWT?

    How to resize and float right a background image using css?

    Modal box doesn't show completely

    How to make space visible in between an unsorted list in HTML/CSS?

    how to 3D rotate a 'a' tag?

    How to disable the letter tail from the last letter of a word in CSS?

    How to make letters in SVG to be animatable individually?

    jquery style sheet switcher - how to effect only theme css?

    How do I add two buttons side by side that are made up of an image?

    JavaScript how to get this html to read this css and organise my script into the table