IMG in einem DIV zentrieren ohne gegebene Höhe & Breite

html.de-Forum HTML, XHTML & CSS
1

Hallu,

ich hab ein Bild, welches eine maximale Höhe und Breite hat mit ein paar Tricks in einem darüberliegenden DIV (dessen Höhe und Breite mehr oder weniger ebenfalls unbekannt ist) zentriert. Das klappt auch super, wenn das Bild die maximalgröße nicht überschreitet.

Folgender Code:

[CODE].user .main .left {
float: left;
width: 118px;
height: 118px;
text-align: center;
border: 1px solid #BBB;
border-radius: 3px;
padding: 5px;
}

.user .main .left:before {
content: ‚‘;
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -0.25em;
}

.user .main .left img {
vertical-align: middle;
display: inline-block;
max-width: 118px;
max-height: 118px;
}[/CODE]

Dazu HTML:
[HTML]






[/HTML]

Wenn ich in .user .main .left.before content und height entferne, würde das für zu große Bilder klappen, allerdings wären dann die kleineren Bilder (kleiner als 118x118px) nur noch horizontal und nicht zusätzlich vertikal zentiert.

Weiß mir jemand zu helfen?:slight_smile:

2

Hallo,

welche Browser müssen denn unterstützt werden?

Gruss

MrMurphy

3

Am besten wären alle, sprich Firefox, Opera, Chrome & Safari.

4

Und welche Versionen des IE? Der ist in der Regel der Knackpunkt.

5

Eigentlich garkeine.

6

Keine IE-Version? Dann mach aus .left ein display: table-cell und lass das floating weg. Dann müsste das Bild innerhalb des Elementes auch vertikal zentriert werden.

7

Stimmt, müsste. Leider dennoch nur horizontal.

8

Kann man das unter einem Link sehen?

9

Sicher, ich lad das mal als Test auf meinen Webspace. Link folgt dann :slight_smile:

EDIT: Hier, habs mal n wenig minimiert und angepasst, ist aber im wesentlichen das gleiche, wie ich es auf meiner richtigen Seite anwende: http://bttt.de/pos.html

10

Versuch’s mal so

.user .main .left {
         float: left;
         width: 128px;
         height: 100%;
         text-align: center;
         border: 1px solid #BBB;
         border-radius: 3px;
         padding: 1px;
  position:relative;
       }
      
      
       .user .main .left img {
         max-width: 100%;
         max-height: 100%;
        position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
       }

und das kann komplett weg

.user .main .left:before {
margin-left: -0.25em;
content: "";
height: 100%;
vertical-align: middle;
display: inline-block;
}

Wobei display:table und display:table-cell einfacher ist.

11

Sehr cool, dankeschön!:slight_smile: