-1

I am having trouble centering these hidden images in there divs. I want the displayed image centred and the thumbnails underneath?

here is the fiddle: http://jsfiddle.net/rabelais/mj7ba/1/

.displayed-image img {
height: 200px;
position: absolute;
top: 10px;
text-align: centre;
}

.thumbnails {
 position: absolute;
 top: 250px;
 text-align: centre;
}
3
  • 1
    centre should be center :)\ May 8, 2014 at 12:06
  • Actually it should be centre since it's English. Unfortunately we are forced to use American English
    – Turnip
    May 8, 2014 at 12:09
  • yes, i know it should be 'center', spell corrector did it without me noticing, however the problem still stands even with the correct spelling of center??
    – angela
    May 8, 2014 at 12:11

3 Answers 3

1

First: The text-align property should be applied to a block container and then it will centre that container's inline content. You should never apply it to an image, since an image is usually an inline element and can never be a container.

Second: Absolutely positioning an element takes it out of normal flow, so it can't be aligned normally.

Third: Most computer languages use American English, not standard English. Centre is spelt center.

You need something more along the lines of:

.displayed-image {
    text-align: center;
}

.displayed-image img {
    height: 200px;

}
.thumbnails {
    text-align: center;
}
.thumbnails img {
    height: 70px;
    border: 1px solid;
}
5
  • thanks, however, i need the displayed images to be positioned absolutely so when they are shown on hover of their correlating thumbnails they appear in the same position?
    – angela
    May 8, 2014 at 12:09
  • Use display instead of visibility and that won't be the case.
    – Quentin
    May 8, 2014 at 12:10
  • Just toggle between display: none and display: inline instead of visibility: hidden and visibility: visible.
    – Quentin
    May 8, 2014 at 12:18
  • $(".thumbnails").on("mouseover mouseout", 'img', function () { var alt = $(this).attr('alt'); $('.displayed-image > img').each(function(index, element) { var el = $(element), display = el.attr('alt') === alt ? 'inline' : 'hidden'; el.css('display', display); }); }); ??????
    – angela
    May 8, 2014 at 12:20
  • "'inline' : 'hidden'"? I said not to use hidden.
    – Quentin
    May 8, 2014 at 12:20
0

Here is working example.

Problem was with containers.

Js fiddle

-1

left. It will work.

.displayed-image img {

    height: 200px;
    position: absolute;
    top: 10px;
    text-align: centre;
    margin-left:200px;
}
.thumbnails {
    position: absolute;
    top: 250px;
    text-align: centre;
    margin-left:200px;
}

If you want any other help just let me know.

5
  • Are you sure it must be centre?
    – John Bupit
    May 8, 2014 at 12:13
  • Thanks for this, although I cannot predict the width of the images that will be inserted, so the margin-left will always be changing.
    – angela
    May 8, 2014 at 12:13
  • You can't predict the width of the container either
    – Quentin
    May 8, 2014 at 12:14
  • hey for this just take measurement of images and then place images in between.
    – Shivam
    May 8, 2014 at 12:17
  • Forcing a fixed width design and rewriting the CSS every time the images change is a really awful approach to centring content.
    – Quentin
    May 8, 2014 at 12:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.