CSS - DIV vertikal zentrieren - Software, allgemein

CSS - DIV vertikal zentrieren

Lieber Besucher, herzlich willkommen bei: Aqua Computer Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Liquidator

Senior Member

CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 17:41

Tach zusammen. Gleich voweg: Ich bin in CSS Anfänger!

So. Ich versuche ein DIV mit 500 px Höhe und 100% breite vertikal auf der Seite zu zentrieren. Gibts da ne einfache Möglichkeit? Google spuckt nur seltsame Workarounds aus, durch die ich nicht ganz durchsteige.

Vielen Dank schonmal.

TrOuble

God

Re: CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 17:57

Moin,

hab dir mal kurz was gebastelt - geht auch ohne hässliche Hacks

http://simplyray.de/tmp/ac.html

Hier noch mal der Code...
html:

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
      <div id="container">

      </div>
</div>

</body>
</html>

und css:

Quellcode

* {
margin:0;
padding:0;
}
#container {
      width:100%;
      height:500px;
      background-color:red;
      position:relative;
      top:50%;
      margin-top:-250px;      
}
#wrapper  {
      position: fixed;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
}

Gucks dir mal am besten an und falls du was nicht verstehst dann einfach fragen

Der Container wird einfach relativ zum #wrapper (der absolute positioniert ist und 100% breite sowie 100% weite des Viewframes einnimmt) positioniert. Und zwar liegt die obere Kante des #container genau bei 50% höhe des Wrappers - da der #container allerdings selbst eine Höhe hat (die 500px) musst du die natürlich noch abziehen - dies geschieht mit den margin-top:-250px

Gruß TrOuble

Y0Gi

God

Re: CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 20:05

Ich positioniere vertikal zentriert mit einer Kombination aus

line-height: ?;
margin: auto;
vertical-align: middle;

und möglicherweise noch anderen. `line-height` wende ich dabei auf einen Wrapper-Container an.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Liquidator

Senior Member

Re: CSS - DIV vertikal zentrieren

Freitag, 29. August 2008, 21:37

dankööö...hat geklappt

TrOuble

God

Re: CSS - DIV vertikal zentrieren

Samstag, 30. August 2008, 14:58

Zitat von »Y0Gi«

Ich positioniere vertikal zentriert mit einer Kombination aus

line-height: ?;
margin: auto;
vertical-align: middle;

und möglicherweise noch anderen. `line-height` wende ich dabei auf einen Wrapper-Container an.

Ich bin mir nicht ganz sicher wie das funktionieren soll - haste zufällig mal nen Code Beispiel da?

Zitat von »Liq«

dankööö...hat geklappt

Kein Problem

Gruß TrOuble

Y0Gi

God

Re: CSS - DIV vertikal zentrieren

Samstag, 30. August 2008, 15:58

Ray: Ich konnte das so ebenfalls nicht für obiges Beispiel bzw. die Anforderung reproduzieren. Allerdings hat es für mich funktioniert um (Galerie-)Bilder in "Cards", also fließenden Blöcken, horizontal und vertikal zu zentrieren.

Mein VCS-Log spuckt diese Schnipsel aus:

Quellcode

ol.images {
    list-style: none;
    margin: 0;
    padding: 0;
}
ol.images li {
    float: left;
    height: 190px;
    margin: 4px;
    text-align: center;
    width: 156px;
}
ol.images li div {
    line-height: 156px;
}
ol.images li img {
    margin: auto;
    vertical-align: middle;
}

aus dem Stylesheet sowie

Quellcode

<ol class="images">
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
  <li><a href="#"><div><img src="..." alt="..." /></div>Caption</a></li>
</ol>

an Markup.

Normalerweise verwende ich für Cards eine andere Verschachtelung, nämlich die Caption in einem <div> und das <img> ohne Container.

Die Formatierung ist IIRC für eine maximale Bildgröße von 150x150 ausgelegt. Hat auf jeden Fall funktioniert, cross-Browser. Evtl. habe ich etwas aus dem übergeordneten Kontext übersehen, das das Konstrukt essentiell beeinflussen muss, damit es klappt. Aber es ging! ;D

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)