Centruokite vaizdą Div horizontaliai

Turiu img div'e (class="top_image") ir noriu, kad šis paveikslėlis būtų tiksliai div'o viduryje, bet niekas, ką bandau, neveikia...

Ačiū už bet kokią pagalbą!

Nima Derakhshanjan
Redaguotas klausimas popietr rugpjūtis 2015 в 3:10
Programavimas
html css
popietr balandis 2012 в 4:58
1 peržiūrėti

text-align: center veiks tik horizontaliam centravimui. Jei norite, kad jis būtų visiškai centre, vertikaliai ir horizontaliai, galite atlikti šiuos veiksmus:

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
Redaguotas atsakymas popietr balandis 2012 в 5:08
Komentarai (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
Redaguotas atsakymas popietr lapkritis 2013 в 6:15
Komentarai (0)

Manau, kad geriau padaryti teksto centrą ir leisti paveikslėliui pasirūpinti aukščiu. Tiesiog nurodykite viršutinį ir apatinį div paddingą, kad tarp paveikslėlio ir div būtų vietos. Pažiūrėkite į šį pavyzdį: http://jsfiddle.net/Tv9mG/

Komentarai (1)