2

I'm trying to vertically centre an image and some text in the middle of a single div (like the logo and site name at the top of the webpage). The image will be on the left with some padding around it, and the text will be right next to the image and also positioned vertically centrally in the div.

This image visualises the outcome:

enter image description here

I've tried many codes from all over the internet, but can't get it to work. Any help would be highly appreciated. Thanks!

Nikola K.
  • 7,093
  • 13
  • 31
  • 39
AntikM
  • 636
  • 4
  • 13
  • 28

4 Answers4

1

Add vertical-align: middle to your image. Here's a jsfiddle exemplifying it.

João Silva
  • 89,303
  • 29
  • 152
  • 158
  • It only works if the text size is the normal one. For texts for various sizes/fonts, this does not work. For example, a

    Title

    would have to work too.     – AntikM Aug 16 '12 at 13:51
  • You need to make it behave like an inline element, by adding `display: inline-block` to your `h1`. – João Silva Aug 16 '12 at 14:04
0

Just a small addition to João's answer (can't post comments):

When you are using a <h1> tag you should add the following to your <h1> tag:

display: inline;
vertical-align: middle;

Live demo: jsFiddle

Multiline compatible: jsFiddle *added*

Just adding display: inline-block; will not position the text correctly.

Community
  • 1
  • 1
rockarolla
  • 135
  • 8
0

Something like this?

http://jsfiddle.net/gy22f/6/

I used display table & table-cell to make vertical-align works properly.

LeBen
  • 1,884
  • 12
  • 21
-1

try this: it worked for me

<div style="border:1px solid black;">
            <table >
                <tr>
                    <td style="margin:10px 0px 10px 10px;border:1px solid black">
                        <img src="http://www.instablogsimages.com/images/2008/01/16/vw-logo-img-routan-van_5965.jpg" style="width:100px;height:100px;" alt=""/>
                    </td>
                    <td>
                        <div style="margin-top:auto;margin-bottom:auto;border:1px solid black;">
                            Some Text
                        </div>
                    </td>
                </tr>
            </table>
        </div>
Christiaan Beekhuizen
  • 1