Ik wil het volgende bereiken, met html en css.

Afbeeldingen moeten in het midden van het beeld (zowel verticaal als horizontaal) staan en de verschillende afbeeldingen moeten op elkaar staan (overlappen).

Zie bijlage voor verduidelijking

Wat heb je al geprobeerd? Je stelt overigens geen eens een vraag, dus wat verwacht je van ons?

Ik stel wel een vraag (lees titel -> ?) en "Ik wil het volgende bereiken..."

Maar voor alle duidelijkheid:
Hoe plaats ik afbeeldingen in het midden van een pagina (zowel horizontaal als verticaal)? Daarnaast moeten de afbeeldingen bovenop elkaar staan (overlappen, zie bijlage).

Wat heb ik al geprobeerd: Ik kan een afbeeldingen horizontaal centreren, maar voor zover ik weet is het niet mogelijk om eenvoudig via css een afbeeldingen verticaal te centreren.

Inderdaad is het verticaal centreren lastig. Hiervoor zal je javascript kunnen gebruiken en gebruik kunnen maken van de document height / window height. Echter zal je dan een trigger moeten gebruiken om bij het resizen van het venster opnieuw de hoogte te bepalen (met jQuery is dit simpel te realiseren met behulp van de resize() functie).
En een simpele berekening zoals:

PHP Code:

$(function() {

    $(document).resize(function(){
        var windowHeight = $(window).height();
        var divHeight = $('#div').height();

        var top = (windowHeight / 2) - (divHeight / 2); // Dit kan je gebruiken als top attribuut van je div
    });

}); 


En aangezien je gebruik wilt maken van overlay divs zal je een absolute positie moeten gebruiken met een verschillende z-index waarden.

Of je gebruikt:

#plaatje {
top: 50%;
margin: -50px 0 0 0;
}

Negatieve top-margin de helft van de hoogte van je plaatje.

Origineel gepost door J. de Boer

Of je gebruikt:

#plaatje {
top: 50%;
margin: -50px 0 0 0;
}

Negatieve top-margin de helft van de hoogte van je plaatje.

Gelijkaardige oplossingen had ik ook al gevonden. Maar het zijn verschillende afbeeldingen van verschillende formaten. Het is niet echt praktisch om voor iedere afbeelding een id te maken.

Dat ligt eraan hoe veel plaatjes je hebt. In je voorbeeld gebruik je er drie en dan voorzie ik geen problemen om drie classes te gebruiken.

Het zijn er momenteel een 6-7 tal en er komen er op verloop van tijd extra bij. De website moet makkelijk aan te passen en te updaten zijn. Dus met dat in het achterhoofd vrees ik dat het niet voldoende praktisch is. Maar als er geen andere oplossing zou blijken te zijn, kan ik nog zien.

Is dit wat je zoekt? http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Origineel gepost door MaartenD

Is dit wat je zoekt? http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Dat is wat J. De Boer voorstelt denk ik.

Goedenavond,

Het is al eerder genoemd en wil dit nog even bevestigen. De beste methode om hetgeen te bereiken wat je wilt (zowel horizontaal en verticaal centreren van afbeeldingen) kun je het beste bereiken door middel van een combinatie van javascript en css. Middels javascript kun je de hoogte en breedte van een afbeelding achterhalen en met CSS kun je het stylen.

Het volgende script gebruik ik voor hetgeen je wilt bereiken:

jQuery javascript

PHP Code:

(function($){
    $.fn.imgCenter = function(options) {

        var defaults = {  
              parentSteps: 0,
              scaleToFit: true,
              centerVertical: true,
              complete: function(){},
              start: function(){},
              end: function(){}
          };  
         var opts = $.extend(defaults, options);
         
        opts.start.call(this);
        
        // Get total number of items.
        var len = this.length - 1;
        
        return this.each(function(i){
            var current = i;
            
            // Declare the current Image as a variable.
            var org_image = $(this);
            
            org_image.hide();
            
            // Move up Parents until the spcified limit has been met.
            var theParent = org_image;
            for (var i=0; i <= opts.parentSteps; i++){
                theParent = theParent.parent();
            }            
            var parWidth = parseInt(theParent.width());
            var parHeight = parseInt(theParent.height());
            var parAspect = parWidth / parHeight;

            if(org_image[0].complete){
                imgMath(org_image);
            } else {
                var loadWatch = setInterval(watch, 500);
            }
            
            function watch(){
                if(org_image[0].complete){
                    clearInterval(loadWatch);
                    imgMath(org_image);
                }
            }

            function imgMath(org_image) {
                // Get image properties.        
                var imgWidth = parseInt(org_image.width());
                var imgHeight = parseInt(org_image.height());
                var imgAspect = imgWidth / imgHeight;
    
                // Center the image.
                if(parWidth != imgWidth || parHeight != imgHeight){
                    theParent.css("overflow","hidden");
                    
                    if(opts.scaleToFit){
                        if(parAspect >= 1){
                            org_image.css({"width": parWidth +"px"});
                            imgWidth = parWidth;
                            imgHeight = Math.round(imgWidth / imgAspect);
                            
                            if((parWidth / imgAspect) < parHeight){
                                org_image.css({"height": parHeight +"px","width":"auto"});
                                imgHeight = parHeight;
                                imgWidth = Math.round(imgHeight * imgAspect);
                            }                
                        } else {
                            org_image.css({"height": parHeight +"px"});
                            imgHeight = parHeight;
                            imgWidth = Math.round(imgHeight * imgAspect);
                            if((parHeight * imgAspect) < parWidth){
                                org_image.css({"width": parWidth +"px","height":"auto"});
                                imgWidth = parWidth;
                                imgHeight = Math.round(imgWidth / imgAspect);
                            }
                        }
                        if(imgWidth > parWidth){
                            org_image.css({"margin-left":"-"+ Math.round((imgWidth - parWidth) / 2) +"px"});
                        }
                        if(imgHeight > parHeight && opts.centerVertical){
                            org_image.css({"margin-top":"-"+ Math.round((imgHeight - parHeight) / 2) +"px"});
                        }        
                    } else {
                        if(imgWidth > parWidth){
                            org_image.css({"margin-left":"-"+ Math.round((imgWidth - parWidth) / 2) +"px"});
                        } else if(imgWidth < parWidth){
                            org_image.css({"margin-left": Math.round((parWidth -imgWidth) / 2) +"px"});
                        }
                        if(imgHeight > parHeight && opts.centerVertical){
                            org_image.css({"margin-top":"-"+ Math.round((imgHeight - parHeight) / 2) +"px"});
                        } else if(imgHeight < parHeight && opts.centerVertical){
                            org_image.css({"margin-top": Math.round((parHeight - imgHeight) / 2) +"px"});
                        }
                    }
                    opts.complete.call(this);
                    if(current == len){
                        opts.end.call(this);
                    }
                }
                org_image.show();    
            }
            
        });        
    }
})(jQuery); 


Gebruik:

PHP Code:

$("img").imgCenter();

of

$(window).load(function(){
$("img").imgCenter();
});

$(window).load(function(){
$("#someElement div.someClass img").imgCenter();
});