21 replies [Last post]
5hoog8ter
Offline
newbie
Last seen: 17 years 30 weeks ago
Joined: 2005-01-13
Posts: 7
Points: 0

Hi all,

I have a div with some size. Say 300 x 300 px. Now I want to center an image in this div wich varies in size but is always smaller than the div. Say 189 x 250 px. How can I do so? I want to center it both vertically and Horizontally.

I got this to center it horizontally:
<style>
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>

<div>
<img src="" border="0" class="center" alt="">
</div>

But I cantget it to center (valign) vertically.

So anyone???? Thanks a lot.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Vertical align IMG

See this demo. Unfortunately, {margin: auto;} is not supported for top and bottom margins. The single-celled table is a sane work-around.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Vertical align IMG

You could do this:

<style>
.centervert{
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
}
.centervert img{
margin: auto;
vertical-align: middle;
}
</style>

<div class="centervert">
<img src="someimg.jpg" border="0" alt="">
</div>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Vertical align IMG

wolfcry911: Have you tested that? {vertical-align: } applies to alignment within the inline line-box unless applied to a table element such as td.

Your suggestion inspires this method;

p {
    line-height: 300px;
    text-align: center;
    }

img {
    vertical-align: middle;
    }

-------------------

<div> <!-- the 300x300px container -->
  <p><img src="some.png" alt="" /></p>
</div>
That works, but has serious limitations. Thanks for the inspiration—another weapon in the arsenal.

[edit] Can you believe the word arsenal got bleeped?[/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Vertical align IMG

Considering the recently curtailed search for WMD, very prudent methinks, you never can tell what may be stored on a server , how many times does Eschelon's(sic) ears prick up at the mention of that word Smile oops that's just got us logged.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Vertical align IMG

gary, I did test and it works (in Safari and Mac IE - haven't tested further).

But - I fail to see the difference in our codes...
Can you enlighten me?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Vertical align IMG

I totally missed the line-height property when looking at your example. :oops:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

d4rkm4tter
Offline
newbie
Last seen: 17 years 26 weeks ago
Joined: 2005-02-07
Posts: 1
Points: 0

Centering images vertical using CSS

I haven't found any solutions for centering images vertically that are fully compatible cross-browser using CSS... until now! Try:

<div style="display: table; margin: auto; height: 100%;">
<p style="display: table-cell; vertical-align: middle;"><img src="image.jpg" width="486" height="664"></p>
</div>

This seems to work in all the major browsers (that doesn't include Opera Tongue)

Hope this helps.

canobi2004
Offline
Regular
Last seen: 17 years 25 weeks ago
Timezone: GMT+1
Joined: 2005-02-15
Posts: 19
Points: 0

Vertical align IMG

Hi d4rkm4tter,

I was looking for a solution to align text vertically in a div. The code you posted worked for that but of course it didn't work in IE. It worked in Mozilla and Opera.

Do you know any solutions for vertically aligning text in a div in IE.

Thanks.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Vertical align IMG

Try this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta name="generator" content="
  HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" />
  <meta name="editor" content="Emacs 21" />
  <meta name="author" content="Gary Turner" />
  <meta http-equiv="content-type" content="
  text/html; charset=us-ascii" />

  <title>2 way centered text</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

p {
    width: 150px;
    margin: 0 auto;
    }

#wrapper {
    width: 760px;
    margin: 0 auto;
   }

#holder {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    }

table, td {
    height: 100%;
    width: 100%;
    }

td {
    vertical-align: middle; /*this is default, so is redundant*/
    }

/*]]>*/

</style>
</head>

<body>
  <div id="wrapper">
    <div id="holder">
      <table>
        <tbody>
          <tr>
            <td>
              <p>The quick brown fox jumps over the lazy dog.</p>

            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gaary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 23 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Vertical align IMG

That seems

a) awfully complex, and

b) pointless - if you're using a table, why not just use valign?

Verschwindende wrote:
  • CSS doesn't make pies

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Vertical align IMG

thepineapplehead wrote:
That seems
a) awfully complex,
Well, not 'awfully'. You could just use the single celled table by its lonesome, but divs respond to sizing in a more consistent manner.

Quote:
and
b) pointless - if you're using a table, why not just use valign?
Because valign is deprecated in favor of css, and vertical-align is the appropriate css property. It is roughly equivalent to valign when used as a td property.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

soniclnd
Offline
Regular
Last seen: 17 years 31 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

Vertical align IMG

that works, but i don't see the point of having the "wraper" and the "holder"

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 29 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

Vertical align IMG

Have you tried the negative top position trick within the containing div? (This would presuppose knowing the rough dimensions of the contained image.)

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Vertical align IMG

Hi Helen,

Welcome to the forum.

That's a sweet little hack. The problem is, that like most AP dependent layouts, it is brittle and doesn't take much to break it. In this case, if the viewport is made small enough to cut off an AP element, that element is lost. It is not scrollable.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 23 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Vertical align IMG

Fair point - due to the negative top margin, if you resize the height of the browser, the box shoots up off the screen.

Verschwindende wrote:
  • CSS doesn't make pies

Helen
Offline
Enthusiast
NYC
Last seen: 17 years 29 weeks ago
NYC
Timezone: GMT-6
Joined: 2005-01-16
Posts: 135
Points: 0

Vertical align IMG

Hi and thanks for the welcome. Smile Newish to CSS, but enjoying myself with it immensely & learning by leaps & bounds just by reading this forum. I'm not a huge fan of AP elements in general, but this seems like a nifty centering trick if it fits into your layout.

Hmm:

thepineapplehead wrote:
Fair point - due to the negative top margin, if you resize the height of the browser, the box shoots up off the screen.

Do you mean in a layout other than the example given on that "dead centre" page? (It stays dead center for me no matter how I resize or shrink my browser window, using Mac Firefox 1.0, Safari, Opera, Omniweb, even the heinous MAC IE. Even to the point of clipping part of the dead-centered box - which is clipped, say horizontally or vertically, but is still visible and centered vertically.)

I haven't tried this trick with an actual image, which is what the OP would be doing, of course. (If I need one big image centered in the middle of the screen, I use it as a background on the body element with background-position: 50% 50%; and width & height at 100%.) I'd been thinking that perhaps it would work for the OP's containing div if s/he knew the dimensions of the image to be contained.

Does line-height vertical centering work in the WinIE's? (I'm no pro, just doing some design work on the side for friends, and my biggest drawback so far is not having an active Windows set-up to check for those browsers. Huge drawback, actually. VirtualPC is expensive and so space-consuming. This is a different topic entirely, sorry! Smile )

Interesting stuff. Thanks for the info!

::goes off to fiddle::

canobi2004
Offline
Regular
Last seen: 17 years 25 weeks ago
Timezone: GMT+1
Joined: 2005-02-15
Posts: 19
Points: 0

Vertical align IMG

Thanks for the code, Gary. I found an alternative solution using line-height i.e. setting the line-height property to exactly the same height of the div (if the height is set), then using vertical-align.

<div style="height: 30px, line-height: 30px, vertical-align: middle">
Is this centered vertically?
</div>

It worked for me on IE, Mozilla, and Opera.

Quote:
That seems

a) awfully complex, and

b) pointless - if you're using a table, why not just use valign?

I thought so too since there is a table (which should be anathema for you guys here, n'est pas?)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Vertical align IMG

Yes, that's a very effective method. But, it works only for a single line item. It is not a general solution. Try adding a caption below the pic, kinda like this;

 
<img src="some.png" alt ="" /> 
<p>Description of the pic.</p>

Tables are not inherently evil. Like any element, it has its uses and mis-uses.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Anonymous
Anonymous's picture
Guru

Vertical align IMG

kk5st wrote:

[edit] Can you believe the word arsenal got bleeped?[/edit]

cheers,

garyIt didn't during the edit. Laughing out loud Maybe it picked up on the first four letters... arse. Laughing out loud

callagga
Offline
Regular
Last seen: 13 years 37 weeks ago
Timezone: GMT+10
Joined: 2006-12-28
Posts: 11
Points: 0

Aligning text vertically

Hi all - coming in a little late on this Smile

Has there been any advances in terms of what the current best practice is for vertically centering TEXT (or text and image) within a DIV?

Tks
Greg

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 15 weeks 23 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

I've always just set the

I've always just set the line-height of the text equal to the height of it's container, that's always centered the text and images for me.

Verschwindende wrote:
  • CSS doesn't make pies