CSS + Mittig

[sterndi]

Hallo Leute !

Ich hab ein Problem. Ich habe mit Pure CSS eine Fixe breite und höhe von 500x500 px.
Jetzt hab ich das Problem das hier sich in dem div sich ein bild befindet das auf einigen seiten unterschiedliche größen hat.

Jetzt ist die Frage wie kann ich sowas mittig Positionieren ?

vertical-align:middle; funktioniert aus irgendwelchen gründen nicht.

bitte um eure hilfe.

 

[Quaese]

Hi,

positioniere das Element zunächst mit left/top in der Mitte (50%). Anschliessend versiehst du
margin-left/margin-top mit Hälfte der der Breite/Höhe.

.mittig{ position: absolute;
         width: 500px;
         left: 50%;
         margin-left: -250px;
         height: 500px;
         top: 50%;
         margin-top: -250px;
}

Ciao
Quaese

 

[sterndi]

hallo !

Vielen Dank für deine hilfe allerdings mus sich das ganze im design befinden und nicht irgendwo und fix positionieren kann ich es nicht da ich das design center.

 

[Quaese]

Hi,

da die Grösse der Bilder nicht bekannt ist, dürfte browserübergreifendes Zentrieren nur mit CSS
schwierig werden.

- Es existieren die Eigenschaften display: table-cell und vertical-align: middle, die jedoch nicht
vom IE interpretiert werden.

.divMittig{ width: 500px;
            height: 500px;
            border: 1px solid #000000;
            text-align: center;
            display:table-cell;
            vertical-align: middle;}

- Eine andere Möglichkeit wäre, eine Tabelle mit einer Zelle zu verwenden, die die Grösse von
500x500 Pixeln besitzt.

<table style="text-align: center; width: 500px;">
  <tr>
    <td style="vertical-align: middle; height: 500px;">
      <img src="bild.gif" width="120" height="120" border="0" alt="" />
    </td>
  </tr>
</table>

- Wenn du auf PHP zurückgreifen kannst, besteht auch die Möglichkeit, die Bildgrösse am
Anfang auszulesen und das CSS-entsprechend anzupassen.

CSS:

.divMittig{ position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid #000000;}

<?php
	$arrSize = getimagesize("bild.gif");
?>
.divMittig img{ position: absolute;
                width: <?php echo($arrSize[0]."px"); ?>;
                height: <?php echo($arrSize[1]."px"); ?>;
                left: 50%;
                margin-left: -<?php echo((int)($arrSize[0]/2)."px"); ?>;
                top: 50%;
                margin-top: -<?php echo((int)($arrSize[1]/2)."px") ?>;}

Und das zugehörige HTML-Fragment:

<div class="divMittig">
  <img src="bild.gif" width="<?php echo($arrSize[0]); ?>" height="<?php echo($arrSize[0]); ?>" border="0" alt="" />
</div>

Das sind die Varianten, die mir einfallen ... vielleicht weis jemand anderes noch mehr.

Ciao
Quaese