div in div abhängig vom Inhalt zentriert

**jmc** · 13.09.2006, 22:01

Sry, das mit dem Anhang hat erst nicht geklappt

Angehängte Dateien

snake.jpg (15,0 KB, 179x aufgerufen)

**ghostgambler** · 13.09.2006, 22:23

Re: div in div abhängig vom Inhalt zentriert

Ich würde sagen: Problem unlösbar.
Jede vertikal-zentrierte Lösung per CSS die ich bisher gesehen habe, erfordert Kenntnis der Höhe der jeweiligen Box. Wenn du meinst das ist variabel hast du ein Problem.

Such bei google nach vertikale Zentrierung oder so, du fällst über genügend Lösungen. Guck ob du davon was verwenden kannst

**mcmurphy** · 14.09.2006, 11:55

Jede vertikal-zentrierte Lösung per CSS die ich bisher gesehen habe, erfordert Kenntnis der Höhe der jeweiligen Box. Wenn du meinst das ist variabel hast du ein Problem

suche auch schon seit geraumer Zeit nach einer Lösung für dieses Problem.
Ist der einzige Fall, wo ich ohne eine Tabelle nicht weiterkomme...

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

 <head>

   <title>Zentrieren </title>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

   <style type="text/css">

   <!--

      html, body {height:100%; width:100%; text-align:center; }

      * { margin:0px; padding:0px; }

      #content { margin:0px auto;  text-align:center; height:100%; width:100%;}

      table { width:100%; height:100%; }

      td { vertical-align:middle; text-align:center; }

      div#bsp {border:1px solid red;  font-size:130px; margin:0px auto;}

   -->

   </style>

 </head>

 <body>

   <div id="content">

   <table  border="0"  cellpadding="0" cellspacing="0">

     <tr> 

       <td> 

        <div id="bsp"> Bsp. Center</div> 

      </td>

     </tr>

   </table>

   </div>

 </body>

</html>

Wer den Effekt OHNE Tabelle hinbekommt kriegt 'nen Smiley von mir

**jmc** · 14.09.2006, 13:56

Vielen Dank.
Hab jetzt ne Lösung gefunden, die bei meinem Problem nützt:

Code:

<style type="text/css">
.div1 {position:absolute; top:120px; left:50px;border:solid 2px blue;z-index:0;}
.table1{ border:solid 2px red;text-align:center;}
td{width:400px;height:400px;}
.div2{position:absolute;top:0px; left:0px;z-index:-1;}
</style>
<div  class="div1">
<table class="table1">
 <tr>
  <td>
   <div class="div2">
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdf<br>
  </div>
   <div style="font-size:46pt;">hdfgdfhfi</div>
  </td>
 </tr>
</table>
</div>

Wenn man ohne Tabelle arbeiten möchte kann man ja auch den display ersatz benutzen mit display:table... ganz ohne Tabelle gehts glaub ich wirklich nicht.

MfG

JMC

**mcmurphy** · 22.09.2006, 12:44

Wer den Effekt OHNE Tabelle hinbekommt kriegt 'nen Smiley von mir

dann gönne ich mir jetzt mal selber den Smiley

PHP-Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    <head>

        <title>Eine dynamische Höhe von 100%</title>



    <style type="text/css">

    div {/* border:1px solid red; */ }

    *{padding:0px; margin:0px;}

 body, html {height: 100%; text-align:center; }

#outer {height: 100%; overflow: visible; margin:0px auto; } /* or without overflow */



#outer[id] {display: table; position: static;}



#middle {position: absolute; top: 50%; } /* for explorer only*/

#middle[id] {display: table-cell; vertical-align: middle; position: static;}



#inner {position: relative; top: -50%; height:100px; 

        width:300px; border:1px solid green;} /* for explorer only */

/* optional: #inner[id] {position: static;} */

    </style>

    </head>    

    <body>

     <div id="outer">

       <div id="middle">

         <div id="inner">

           any text

           any height

           any content, for example generated from DB

           everything is vertically centered

         </div>

       </div>

     </div>

    </body>

</html>

Quelle:
Stimmt zwar im IE noch nicht 100 %, aber die Richtung ist da

div in div abhängig vom Inhalt zentriert