centering an image

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I'm writing another slideshow and I would like center an image in the
middle of a container.

I could do this:

<div style="display:table-cell;vertical-align: middle;text-align:
center; width...;height...">
<img ...>

</div>

Any other ideas? The text-align bothers me, but otherwise my option
would seem to be:

<img style="display:block;margin: auto"...

For your amusement, the latest css3 banner rotator test:

http://www.rio-arriba.org/banner_test.html

   Jeff


Re: centering an image

wrote:

Quoted text here. Click to load it
 
Quoted text here. Click to load it

Why does it bother you?

--
dorayme

Re: centering an image

On 5/31/2012 1:16 AM, dorayme wrote:
Quoted text here. Click to load it
Well, if it doesn't bother you, that's good enough for me. Table-cell
makes it dead easy to slice it up like tic tac toe and put a checker in
any position. With position: absolute it is hard to center, particularly
vertical. I toyed with display:inline-block, you need a full height
inline-block next to it to play off of.

Jeff

Re: centering an image

wrote:

Quoted text here. Click to load it

Centring an inline thing horizontally using text-align: center; is
quite often the perfect thing to do. It is not just practical but it
has internal beauty that may not always be appreciated. You don't need
a width to the container, browsers are really clever in how they get
the dead centre. They know the size of pictures, words, sentences
without needing to be told, the only concern I imagine anyone could
have about it is that it *may* seem a little creepy (you know, like
when you ring up some organisation and give a couple of details and
they tell you many other things about you).

Quoted text here. Click to load it

Well, yes, the only concern here has been browser support. But it is
perhaps good enough now to risk this.

Quoted text here. Click to load it

It can be tricky but it is one way to get some vertical centring. I
have some stuff on this at

<http://netweaver.com.au/centring/

Quoted text here. Click to load it

I should add some stuff about these fine elements. One of them rang me
up the other night, reckoned it was Secretary of some inline-block
organization, and why were its members being neglected? I mumbled
stuff about inline blocks being members of the inline community and
that my concerns in that url were quite general... but it was no good,
it refused to be consoled.

Not sure how it would help you? Displaying an element as an
inline-block it then needs text-align center; for horiz centring like
an img element or a sentence. As for vertical centring, I would have
to think if it helps? Will think more on the matter.

--
dorayme

Re: centering an image

On 5/31/2012 4:28 AM, dorayme wrote:
Quoted text here. Click to load it
<snip>
Quoted text here. Click to load it

What a magnificent thing tables are. All those centering bits came in
with tables way back in NS2. Tables have always worked, whether they
were in or out of favor.


  They know the size of pictures, words, sentences
Quoted text here. Click to load it

http://caniuse.com/#feat=css-table

Everything but IE7.

http://www.techspot.com/news/46859-ie-market-share-slips-facebook-pulls-support-for-ie7.html

So, ditching IE7 support is popular.
Quoted text here. Click to load it

It gets too convoluted.


Will think more on the matter.
Quoted text here. Click to load it


Re: centering an image

wrote:

Quoted text here. Click to load it
...

Of course, text-align: center; on a container of an inline element
works quite independently of tables.
 
...
Quoted text here. Click to load it

That's good.

...

...

Well, maybe. It does not seem *more* convoluted than simply having img
elements in their natural states inside some normal block container
like a DIV. Inline-blocks come into their own when you want to mix
various things inside like pics and captions or micro essays, they
form an island but are inline. Great for galleries.

--
dorayme

Re: centering an image

It's not just the centring that's the problem, but also the aspect
ratio when the images are different sizes.  You may care to take a
look at my JS Slide Show here.  You may even care to use it, to save
you reinventing the wheel.
http://www.macfh.co.uk/JavaJive/ProgScriptWeb/General.html


Quoted text here. Click to load it
--
=========================================================
Please always reply to ng as the email in this post's
header does not exist.  Or use a contact address at:
    http://www.macfh.co.uk/JavaJive/JavaJive.html
    http://www.macfh.co.uk/Macfarlane/Macfarlane.html

Re: centering an image

On 5/31/2012 5:37 AM, Java Jive wrote:
Quoted text here. Click to load it

Thanks. It will take me a while to get through it as I want look at the
other functions as well.

I'm aware of aspect needs. Does an image have to be fully loaded before
you can get it's height and width? Or can this be pulled from the image
header before it is loaded?

What I was thinking was to have a *square* container and then constrain
the max width or max height of the image to that container size. That
way the image always fits. You wouldn't need to know whether it was
landscape or portrait. You would need to set the max dimension though.

In reality, when I save images online, I also save other meta
information like image dimensions in a database.

Jeff
Quoted text here. Click to load it


Re: centering an image

Quoted text here. Click to load it

I've seen various methods touted for getting the dimensions of
pictures, but none of them seem to work in all browsers, and actually
many don't work *properly* at all  -  instead of the dimensions of the
picture *before* it has been loaded, most methods give you the
dimensions *after* it has been loaded, and that is no help at all in
getting the aspect ratio right, because the picture has already been
stretched and squashed into the available space.

As described on my page linked up thread, the only way I've found that
consistently works from browser to browser and from one arbitrary
picture to the next is to load the picture 'off-screen', so that it is
undistorted by the browser attempting to display it, note the
dimensions for use in aspect ration calculations, and then reload the
picture into the part of the page where you actually want to display
it, altering the dimensions as required to fit it into the available
space with the correct aspect ratio.

Quoted text here. Click to load it

Yes, that's the way my slide-show does it.  As explained in its
documentation and example code, you have to set the dimensions of its
parent container, either the body or a div.  From there it works
pretty much as you describe, except that if you only do as you
describe, you won't get the aspect ratios right  -  the dimensions of
the pictures will be stretched or squashed to fit the dimensions of
the parent container.

To get the aspect ratios right, you have find out the dimensions of
each 'next' picture as described above, then do an aspect ratio
calculation and a margin calculation, then programmatically set the
dimensions and margins of the img tag accordingly as you load the next
picture into it (by changing the src attribute to its URL).

The bits of code that do this in my script are ...

    function sNext( anEvent )
    function sShow(index)

Quoted text here. Click to load it

Well, that would certainly save you loading each image twice, but
requires more maintenance to ensure each picture's metadata is present
and correct.  My aim was to avoid the need for any maintenance or
metadata by having something that would work correctly just from being
fed an array of img src URLs, and that's exactly what it does.
--
=========================================================
Please always reply to ng as the email in this post's
header does not exist.  Or use a contact address at:
    http://www.macfh.co.uk/JavaJive/JavaJive.html
    http://www.macfh.co.uk/Macfarlane/Macfarlane.html

Site Timeline