Έχω μια img
σε ένα div (class="top_image"
) και θέλω αυτή η εικόνα να είναι ακριβώς στη μέση του div αλλά τίποτα από όσα δοκιμάζω δεν λειτουργεί...
Ευχαριστώ για κάθε βοήθεια!
text-align: center θα λειτουργήσει μόνο για οριζόντια κεντράρισμα. Για να είναι στο πλήρες κέντρο, κάθετα και οριζόντια, μπορείτε να κάνετε τα εξής :
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];
}
<div class="outer">
<div class="inner">
<img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
</div>
</div>
<hr />
<div class="outer">
<div class="inner">
<img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
</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;
}
Νομίζω ότι είναι καλύτερα να κάνετε text-align center για το div και να αφήσετε την εικόνα να φροντίσει για το ύψος. Απλά καθορίστε ένα top και bottom padding για το div για να υπάρχει χώρος μεταξύ της εικόνας και του div. Κοιτάξτε αυτό το παράδειγμα: