CSS Box - vertical align

**Kropff** · 24.09.2009, 19:06

gibt dem #header_top_left ein entsprechendes padding-top und dem Inhalt ein margin: auto;

Peter

**AmicaNoctis** · 24.09.2009, 19:26

Hallo,

Zitat von Kropff Beitrag anzeigen

gibt dem #header_top_left ein entsprechendes padding-top und dem Inhalt ein margin: auto;

dann wäre es aber nur horizontal zentriert und nicht vertikal.

Hier mal ein Beispiel, wie es gehen würde:

HTML-Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>CSS</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			html, body {
				height: 100%;
			}
			div.v-center {
				position: relative;
				top: 50%;
				left: 50%;
				margin: -100px 0 0 -100px; /* -(halbe Höhe) 0 0 -(halbe Breite) */
				width: 200px;
				height: 200px;
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		<div class="v-center"></div>
	</body>
</html>

Gruß,

Amica

**Kropff** · 24.09.2009, 19:37

Inhalt in einer CSS Box vertikal mittig anzuordnen

Offenbar soll der Inhalt in der Box entsprechend ausgerichtet werden. Und nicht die Box selber.

Peter

**kerbstone** · 24.09.2009, 19:40

Das ist richtig. Die Betonung liegt auf dem Inhalt.

**Kropff** · 24.09.2009, 19:42

Zitat von kerbstone Beitrag anzeigen

Das ist richtig. Die Betonung liegt auf dem Inhalt.

Dann nimm meine Lösung.

EDIT:
Ups, stimmt nicht, melde mich später.

OffTopic:
@Freundin der Nacht
Wer lesen kann, ist klar im Vorteil
SCNR

Peter

**AmicaNoctis** · 24.09.2009, 19:43

Naja, jeder Inhalt liegt in einer Box oder lässt sich durch eine weitere einschachteln. Wenn das nicht in Frage kommt, nimmst du halt

Code:

display: table-cell;
vertical-align: center;

Die Elternbox muss dann aber [FONT="Courier New"]display: table-row;[/FONT] sein. Damit hab ich aber in allen IE-Versionen schlechte Erfahrungen gemacht.

@Freundin der Nacht
Wer lesen kann, ist klar im Vorteil

SCNR

Was habe ich denn deiner Meinung nach überlesen?

**Kropff** · 24.09.2009, 19:50

Eine Lösung könnte so ausehen:

PHP-Code:


<!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" xml:lang="en" lang="de">
<head>
  <style type="text/css">  
    *
    {
      margin: 0;
      padding: 0;
    }  
    div.rahmen
    {
      width: 400px;
      height: 100px;
      border: 1px solid #f00;
      padding-top: 50px;
    }  
    /* so */
    h1
    {
      text-align: center;
    }
    /* oder auch so */
    div.rahmen *
    {
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="rahmen">
    <h1>Bla blubb</h1>
  </div>
</body>
</html>

Aber mein ehemaliger Art-Director sagte immer: "Zentrieren ist Deppendesign".

Peter