kostenloser Webspace werbefrei: lima-city

Centrieren von gefloteten divs

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   psd

   psd hat kostenlosen Webspace.

   8:16, 27.5.2010

   Hey,
   
   ist es möglich einen Float für das Eltern Element aufzuheben?
   
   Also ca. so soll das ganze Später aussehen:
   
   Float Zentrierung
   
   

   body {
   	text-align:center;
   	margin:0 auto;
   }
   
   #wrapper {
   	margin:0 auto;
   	height:auto;
   	width:80%;
   	background:#999;
   	overflow:auto;
   }
   #center_float {
   	width:99%;
   	margin:auto;
   }
   .float {
   	height:300px;
   	width: 250px;
   	background:#0C3;
   	float:left;
   }

   
   
   wrapper = rot
   center_float = schwarz
   float = grün
   
   
   
   Also ich diesen Beitrag verfasst hab, ist mir die Erleuchtung gekommen...
   Die Mods können es löschen oder auch stehen lassen für Andere die dasselbe Problem haben.
   
   
   Antwort:
   
   Wenn ich versucht habe die inneren Elemente
   

   .float {
   	height:300px;
   	width: 250px;
   	background:#0C3;
           display: inline;
           oder
           display: inline-block;
   }

   
   mit einem
   

   display: inline-block;

   
   versehe bekomm ich zwar das gleiche Ergebnis wie mit dem Float, kann es Zentrieren aber habe Umbrüche zischenden Div- Containern oder
   kann keine Höhen und Breiten mehr angeben. (display:inline;)
   
   Wenn ich jedoch den übergeordneten Div damit bestücke und da er eh nur so groß wie der Inhalt werden soll,
   kann ich diesen wieder durch
   

   text-align:center;

   
   Zentrieren.
   
   der Code dazu:
   CSS

   body {
   	text-align:center;
   	margin:0 auto;
   }
   
   #wrapper {
   	margin:auto;
   	height:auto;
   	width:80%;
   	background:#999;
   	overflow:auto;
   	text-align:center;
   }
   #center_float {
   	width:auto;
   	margin:auto;
   	display: inline-block;
   }
   .float {
   	height:300px;
   	width: 250px;
   	background:#0C3;
   	float:left;
   }

   
   
   HTML

   <div id="wrapper">    
       	<div id="center_float">           
               <div class="float">
               </div>
               <div class="float">
               </div>
               <div class="float">
               </div>                       
           </div>       
       </div>

   
   
   hoffe ich erspare jemanden stundenlanges Suchen in Google.
   mfg
   psd
   
   
   Beitrag zuletzt geändert: 27.5.2010 8:19:29 von psd

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. tangoal

   

   tangoal hat kostenlosen Webspace.

   19:56, 27.5.2010

   Hey, danke psd. Das ist doch mal ne nützliche Info, mit der ich etwas anfangen kann. Hatte nämlich auch so ein ähnliches Problem, und habe es irgendwie gelöst, was mich aber noch nicht zufriedenstellt. Dass für display auch sowas wie inline bzw. inline-block gibt, hab ich einfach nicht gefunden. Baue ich demnächst so um, danke^^

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?