Centrer billedet i div horisontalt

Jeg har et img i en div (class="top_image") og jeg vil have dette billede til at være præcis i midten af div'en, men intet af det jeg prøver virker...

Tak for al hjælp!

Nima Derakhshanjan
Redigeret spørgsmål 2015ør august 2015 в 3:10
Programmering
html css
2012ør april 2012 в 4:58
1 se

text-align: center fungerer kun til horisontal centrering. Hvis du vil have den helt i midten, både lodret og vandret, kan du gøre følgende :

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
Redigeret svar 2012ør april 2012 в 5:08
Kommentarer (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
Redigeret svar 2013ør november 2013 в 6:15
Kommentarer (0)

Jeg tror, det er bedre at lave text-align center for div og lade billedet tage sig af højden. Du skal bare angive en top og bund padding for div for at have plads mellem billede og div. Se på dette eksempel: http://jsfiddle.net/Tv9mG/

Kommentarer (1)