Forum Moderators: not2easy
I tried a lot of things. Absolutely everything I tried (except of course for the "positioning" stuff that didn't do what I wanted in ANY browser - most probably because I don't yet know how to implement it properly!) worked just fine in IE, and validated to 4.01 Strict just fine too. NOTHING I tried of various things I read here and at some of the sites like **** worked in the "other" browsers. Talk about tearing out one's hair!
I wound up stumbling onto a workable solution - I'm pretty sure I read something like it here somewhere, but couldn't find it just now when I went Searching.... in the <body> declarations, I included "text-align:center;" and used ".c1 {margin:0 auto;}" as the class selector for the block-level sections. The header and footer center the way they're supposed to as well.
The pages all validate, so does the CSS. And best of all, the pages look like they're supposed to no matter which flavor of browser I load them up in. Of course, this sort of tweak is no doubt known to most of the rest of you, but I'm feeling pretty "pat-self-on-back" right now! So don't deflate me too fast, okay? *laughing*
Far be it from me to discourage anyone from buying a Mac, but browsercam.com and danvine.com/icapture may save you a bit of money.
[edited by: jetboy_70 at 12:03 am (utc) on April 4, 2004]
You second link goes to a "domain for sale" page....
To clarify:
The "proper" (e.g. standards compliant) way to center a block level element in CSS is to set it's left and right margins to
autoBut naturally this doesn't work in old browsers. So to support the antiques you set
text-align:center;body
Hey vkaryl, glad you figured it out, but you should have asked - we could have helped.
Yes, grahamstewart, I know you could have.... what happens is that I get SO INVOLVED in doing it myself, using the Search function, working on this that n the other tweak, surfing to here and there, that I never take the time to just post to say, "okay I'm an idiot, help me!"
*shrug* Bet you I remember this a lot longer than if one of you nice folks had just "fixed" it for me....
Im converting a site over bit by bit from total table layout to using divs for the most obvious bits, however despite doing all sorts of fancy menus & hover effects I've hit a complete n00b snag.
<div style="vertical-align:middle;text-align:centerwidth:100px;height:100px;">
<img src="/my/stupid/face.gif">
</div>
or..
<div style="text-align:center;width:100px;height:100px;">
<img src="/my/stupid/face.gif" style="vertical-align:middle;">
</div>
Aint having none of it... so how *do* you center (both horizontally and vertically) an irregular image in a square div box (or any other containter really).
This is all very easy with tables :D
Here are a few off-the-cuff suggestions.
You could try enclosing the gif in text, say a no-break space on each site. I haven't tried it but it might work.
You could use padding within the div to force the gif to the centre, but padding can affect the width of the div in certain browsers.
You could put borders around the gif to take up the space, but I'm not sure about browser compatibility.
You could treat it as a background image, specifying the position as center and middle, but again I'm not sure about browser compatibility.
Or a down-and-dirty way would be to run it through Photoshop (or something similar) and add a transparent background the size of the div. No browser can screw that up!
But one thing to consider is that trying to exactly emulate a table layout with divs can be more trouble than it's worth. With a more natural div layout you could perhaps reposition the div and then just float the gif to one corner.
This HTML (note - no need for that extra DIV)
<img id="pic" src="/my/stupid/face.gif" width="100" height="160" alt="My mugshot">
..and this CSS..
#pic {
display:block;
position:absolute;
top:50%;
left:50%;
margin:-80px 0 0 -50px;
}
body {
margin: 0px
}
#horizon {
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
display: block
}
#content {
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
}
<body>
<div id="horizon">
<div id="content">
<p>This text is DEAD CENTRE</p>
</div>
</div>
</body>
It seemed okay in Opera 7.23, IE6, IE5.5, Firefox 0.8 and Netscape 7 (which is what I usually target).
But.. is there any way to do it without knowing the width/height of the element in advance?
For an example where its needed...
<Sorry, no personal URLs. See TOS [webmasterworld.com]>
Previously each of the images was encased in a table (ugh) to forced width/height dimensions, and then the image was centred in. With float:left/display:inline this meant the images would bounce around in a nice structured arrangement depending on the size of the window... and the images nicely positioned in the middle vertically/horizontally.
Of course, can do that without centering & just leave them in the top-left, but its "nicer" I guess. I know the box dimensions are exactly 120x120, but the images vary... :)
Thanks again,
[edited by: tedster at 12:41 am (utc) on April 7, 2004]
But I don't think you can center vertically without knowing the height tho.
.yourdiv {
background-image:url(http://www.whatever/whatever.jpg);
background-position:center center;
background-repeat:no-repeat;
}
.yourdiv {
background: url(http://www.whatever/whatever.jpg) no-repeat center;
}
..but you'd still need to know the image height so you know how tall to make the div.
I can actually predict the size of the images prior to them being download (by simulating the resize while outputting the html), I was just wanting to avoid it... I guess I could also just start fixing an exact dimensio to them.
The background image method is a good method, as I do know the *maximum* size of the image (100x100) so can presumably set the div to that & let the centering do its work...
Thanks for all yer help folks, hope I can help some of you out in the future (php/mysql is more my thing :) )
php/mysql is more my thing
Then you should take a look at this PHP function:
The getimagesize() function will determine the size of any GIF, JPG, PNG, SWF, SWC, PSD, TIFF, BMP, IFF, JP2, JPX, JB2, JPC, XBM, or WBMP image file and return the dimensions along with the file type and a height/width text string to be used inside a normal HTML IMG tag.
and use the returned data in your styles.
You're right, I *could* do the resize before hand and then use the function you mentioned, but that puts a delay in before downloading the images. I'll probably start resizing to a fixed size with crop/resize... be nice and structured like that :D
And Im not actually sure that those libs are supported by my host (or the PHP ImageMagick ones - using command line). Anybody know a good cheap host that does?
If you want the addy, sticky me.
But this is my fix after much struggle. Not sure about browser compatiblity:
CSS:
div.yourdiv {
display: table-cell;
vertical-align: center;
text-align: center;
}
Here's the HTML:
<div class="yourdiv">
<img src="centeredimage.jpg">
</div>
That center the image vertically AND horizontally for me.
