Afbeelding horizontaal centreren in div

Ik heb een img in een div (class="top_image") en ik wil dat deze afbeelding precies in het midden van de div staat maar niets wat ik probeer werkt...

Bedankt voor alle hulp!

Nima Derakhshanjan
Bewerkte vraag 25ste1 augustus 2015 в 3:10
Programmering
html css
2de0 april 2012 в 4:58
1 kijk op

text-align: center zal alleen werken voor horizontale centrering. Om de tekst volledig in het midden te krijgen, zowel verticaal als horizontaal, kunt u het volgende doen :

div
{
    position: relative;
}
div img
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: [-50% of your image's width];
    margin-top: [-50% of your image's height];
}
Maxime Fabre
Bewerkt antwoord 2de0 april 2012 в 5:08
Commentaren (4)
 
<div class="outer">
    <div class="inner">
        ![tall image](http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg)
    </div>
</div>
<hr />
<div class="outer">
    <div class="inner">
        ![wide image](http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg)
    </div>
</div>

CSS

img
{
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto auto;
}

.outer
{
    border: 1px solid #888;
    width: 100px;
    height: 100px;
}

.inner
{
    display:table-cell;
    height: 100px;
    width: 100px;
    vertical-align: middle;
}
user369450
Bewerkt antwoord 13de2 november 2013 в 6:15
Commentaren (0)

Ik denk dat het beter is om text-align center te doen voor div en de afbeelding de hoogte te laten bepalen. Geef gewoon een top en bottom padding op voor div om ruimte te hebben tussen de afbeelding en div. Kijk naar dit voorbeeld: http://jsfiddle.net/Tv9mG/

Commentaren (1)