Centering Vertically

Everything I have tried has failed miserably.

I want to vertically align some text and an image within an element.

I need it to be compatible in both IE and Firefox.

Thanks

 

Without a link to your website, I do not know how your page is structured. However using CSS property "vertical-align: middle;" for the parent element of whatever elements you want vertically centered should work.

 

I tried that and it didn't work.

Let's say the code is structured like this.

<div>
<p><img src="/images/pic.jpg" align="left">Some text here which I want to be vertically centered.</p>
</div>

Code (markup):

 

"vertical-align: center;" works best for tables. For other element, the below should work.

-Edit: Revised

<div style="height: 200px;">
  <p style="position: relative; top: 50%;">
    <span style="position: relative; top: -50%;">
      <img src="http://www.google.com/favicon.ico">
      Some text here which I want to be vertically centered.
    </span>
  </p>
</div>

HTML:

 

I can't get anything to work. If it was a table and I apply it to the td element, what code would I use exactly?

 

The code I posted above should work in most situations if you implement it properly. What code did you use?

For tables:

<table>
  <tr>
    <td style="height: 200px; width: 20px; vertical-align: middle;">
      Hello test
    </td>
  </tr>
</table>

HTML:

The reason I set a height in both situations is because in order to see the vertical aligning, you must have a height. By default, table cell are vertically aligned middle.

 

The problem is when you align="left" the image the text alignment moves to the top of the image, it's not vertically centered.

 

align="left" is not valid HTML4/XHTML. CSS "text-align: center;" would be the proper replacement to align inline elements. Also, you cannot align direct child elements to different sides in the same child element using align properties. To do this, you can use floats. The code code below floats the image left, and centers the text.

<div style="height: 200px;">
  <p style="position: relative; top: 50%; text-align: center;">
    <span style="position: relative; top: -50%; overflow: auto;">
      <img style="float: left;" src="http://www.google.com/favicon.ico">
      <span style="text-align: center;">Some text here which I want to be vertically centered.</span>
    </span>
  </p>
</div>

HTML:

 

I appreciate the help, but I give up dude. All that did was center the text horizontally.

 

It would really help the process if you showed the exact code/page you were working with. One of the methods above should work fine. However, if you are incorporating other elements and controls into the page, then I need to see those and adapt to those.

If you look here: Test Output
You will so both methods above at work.

Editable Version

 

Please see vertical centering of inline elements. This demo/tutorial works on IE6-8, and modern browsers.

In the Practical Examples, Simple Text and Images, remove the br element, and style the image to float. You'll have exactly what you asked for.

Do read the explanation. The work-around for IE6/7 is not intuitive, and will require some thought. For modern browsers, this is trivial.

cheers,

gary