Steffen Flämig: <div> innerhalb eines anderen <div> zentrieren

Hallo,

ich verzweifele gerade daran, ein (auf eine feste Breite formatiertes) <div> in einem anderen <div> zu zentrieren.

Kann mir mal jemand die Tomaten von den Augen nehmen ;-(.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
.foo
{
 text-align: center;
 border-color:CYAN;
 border-width:5px;
 border-style:solid;
}
.bar
{
 width:200px;
    text-align: center;
    border-color:RED;
    border-width:1px;
    border-style:solid;
}
</style>

</head>

<body>
 <div class="foo">
  test 1
  <div class="bar">
   test2
  </div>
 </div>
</body>
</html>

Gruß
Steffen

  1. Hi,

    Kann mir mal jemand die Tomaten von den Augen nehmen ;-(.

    _text_-align bezieht sich auf die Ausrichtung von _Text_, daher der Name. Zur Ausrichtung von Block-Elementen gibt es float, position (inkl. top, right, bottom und left), margin sowie bestimmt noch etwas, das ich jetzt vergessen habe. Für Dich sind in diesem Zusammenhang die letztgenannte Eigenschaft und der Wert "auto" besonders interessant.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">

    He! He, Du! Hättest Du Interesse an einem "X"?

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      Zur Ausrichtung von Block-Elementen gibt es float, position (inkl. top, right, bottom und left), margin sowie bestimmt noch etwas, das ich jetzt vergessen habe. Für Dich sind in diesem Zusammenhang die letztgenannte Eigenschaft und der Wert "auto" besonders interessant.

      Und wie zentriere ich damit ein Block-Element in einem anderen?
      [1]Sorry, aber ich kapier heute abend etwas schlecht.

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
             "http://www.w3.org/TR/html4/strict.dtd">

      He! He, Du! Hättest Du Interesse an einem "X"?

      siehe [1]

      Gruß
      Steffen

      1. Hallo!

        Und wie zentriere ich damit ein Block-Element in einem anderen?

        Weise dem inneren Block-Element margin: 0 auto; zu.

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
               "http://www.w3.org/TR/html4/strict.dtd">

        He! He, Du! Hättest Du Interesse an einem "X"?
        siehe [1]

        Warscheinlich wollte dich Cheatah dazu bringen, XHTML zu benützen, anstatt HTML :-)

        ciao, ww

        --
        sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)
  2. Hallo Steffen,

    .foo {
     text-align: center;
     border:5px solid cyan;
    }
    .bar {
     width:200px;
     margin:0 auto;  /* Zentriert das Ganze */
     text-align: center;
     border:1px solid red;
    }

    Gruß,
    Dodwin

  3. Hallo!

    Siehe FAQ: http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte :-)

    ciao, ww

    --
    sh:(  fo:|  ch:~  rl:(  br:>  n4:~  ie:%  mo:)  va:)  de:]  zu:)  fl:(  ss:|  ls:~  js:)