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

Posted on 2007-08-07
Last Modified: 2013-11-19
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="" ><br>

<div class="smallish">

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

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


Question by:mtnr
    LVL 17

    Accepted Solution

    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.
    LVL 16

    Expert Comment

    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.

    LVL 18

    Assisted Solution

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now