• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1237
  • Last Modified:

center text and images in div, vertically and horizontally, with overflow:hidden.

Trying to center stuff (text and image) in a div (vertically and horizontally).
The div has a specific height and width, with anything that doesn't fit hidden (overflow:hidden).

But it doesn't work in IE at all.

And it Firefox, when I put in display:table-cell; vertical-align:middle;
it breaks both height and overflow:hidden.  

How to fix?
Thank you.

<style type="text/css">

body {
word-wrap: break-word;
.smallish {
      border:1px solid blue;
      font-size: 12pt;


<div class="smallish">
<img src="http://addons.mozilla.org/img/app-icons/firefox_small.png" ><br>

<div class="smallish">

<div class="smallish">
This div has no long words.

<div class="smallish">
But unfortunately, there are some long words.


2 Solutions
I would experiment with using:

margin-left: auto;
margin-right: auto;

same for top and bottom...

and you may have to use some container div's on the inner content...  Just a suggestion.
Vertical alignment is only for inline elements and table-cell elements, not for block elements.  

Background images can be vertically centered, so that might be a solution.  

To achieve this.



You should use html <img> tags for images that are content and CSS background images for images that are presentation.  If your image is a picture of your "Item" then the image is content.


Otherwise you will have to use margins to align your image and text in-order for it to be cross browser.

I agree with ellandrd that you should probably use margins but I would disagree about using a background image unless the image is for site decoration? If it is actual content then I would keep the image inline and use margin-top.

Someone has a technique to vertically align a div here using CSS:


Not sure if it is worth the trouble.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now