• 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.

<html>
<head>
<style type="text/css">

body {
word-wrap: break-word;
}
.smallish {
      padding:3px;
      margin:3px;
      border:1px solid blue;
      font-size: 12pt;
      width:60px;
      height:60px;
      overflow:hidden;
      display:table-cell;
      vertical-align:middle;
      text-align:center;
}

</style>
</head>
<body>

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

<div class="smallish">
Text.
</div>

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

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

</body>
</html>

0
mtnr
Asked:
mtnr
2 Solutions
 
jasonsbytesCommented:
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.
0
 
ellandrdCommented:
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.

body
{
   background-image:url(background_image.jpg);
   background-position:center;
   background-repeat:no-repeat;
}

http://www.w3schools.com/css/css_background.asp

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.

http://www.student.oulu.fi/~laurirai/www/css/middle/

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

ellandrd
0
 
Eternal_StudentCommented:
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:

http://exanimo.com/examples/css/vertical-centering-with-a-floated-shim.html

Not sure if it is worth the trouble.
0

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