• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

gefloatete DIV Container zentrieren

J

joergi

Mitglied
Hi,

für eine mobile Version meiner Webseite suche ich nach einer Möglichkeit, gefloatete Div Container zu zentrieren. Im Internet gibt es zwar einige Lösungsmöglichkeiten. Aber die funktionieren nicht oder ich verstehe Sie nicht.

Im Endeffekt möchte ich erreichen, das die DIV´s immer zentriert sind. Auch wenn man das Browserfenster verkleinert und dann z.B. nur noch zwei DIV´s in einer Reihe passen. Könnt Ihr mir helfen? Hier mein Code!

HTML: 
<!DOCTYPE html>
<style>
   .box
    {
    font-size:1em;
    position: relative;
    height:100%;
    width:95%;
    min-width:320px;
    max-width:1024px;
    margin-top:1%;
    border: 1px solid #000000;
    border-width: 1px;
    display: inline-block;
    background-color: #ffffff;
    padding-left:0.5%;
    padding-right:0.5%;
    padding-bottom:0.5%;
    text-align:left;
    }
</style>
<div align="center">
<div class="box">

<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:3px; margin-right:30px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild1.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:0px; margin-right:30px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild2.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:0px; margin-right:0px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild3.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:3px; margin-right:30px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild4.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:0px; margin-right:30px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild5.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:0px; margin-right:0px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild6.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:3px; margin-right:30px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild7.jpg.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:0px; margin-right:30px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild8.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
<div style="overflow:hidden; border: 1px solid #000000; width:270px;height:230px; margin-left:0px; margin-right:0px; margin-bottom:30px; float:left;">
<div style="border-bottom: 1px solid #000000; width: 270px; height:206px; background-size:cover; background-image: url('bild9.jpg'); background-repeat:no-repeat; background-position:50% 50%;" >
</div>
<div style="text-align: center; font-size:0.50em; height:100%; margin-top:2px; line-height: 1.5">
irgendein Text</div>
</div>
</div>
</div>
 
Zunächst mal solltest du deine Seite mit validem (HTML 5) und vollständigem HTML-Grundgerüst aufbauen.
https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundgerüst
Ebenso die im <head> die (Pflicht-)Vorgaben zum Titel, Charset und Viewport einfügen.
Mit 'float' und 'align="center"' wirst du dein Vorhaben nicht in die Tat umsetze können - das sind ungeeignete (und veraltetet) Methoden, die man in HTML 5 vermeiden sollte. Das richtige Layout für dich wäre Flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Und ebenso solltest du diese Inline-Styles vermeiden - wo immer möglich gehören CSS-Formatierungen in dein Stylesheet (möglichst extern).

Dein valider funktionierende Code könnte dann so aussehen - sollte auch zu 100% responsive sein :
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
<title>Flex Layout</title>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box;
   }
.box {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   font-size: 1em;
   position: relative;
   height: 100%;
   width: 95%;
   min-width: 320px;
   max-width: 1024px;
   margin: 1% auto 0 auto;
   border: 1px solid #000000;
   border-width: 1px;
   background-color: #ffffff;
   padding-left: 0.5%;
   padding-right: 0.5%;
   padding-bottom: 0.5%;
   }
.flex_item {
   overflow: hidden;
   border: 1px solid #000000;
   width: 270px;
   height: 230px;
   margin: 0px 15px 30px 15px;
   }
.div_mit_bild {
   border-bottom: 1px solid #000000;
   width: 270px;
   height:206px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position:50% 50%;
   }
.bild_1 {
   background-image: url('bild1.jpg');
   }
.bild_2 {
   background-image: url('bild2.jpg');
   }
.bild_3 {
   background-image: url('bild3.jpg');
   }
.bild_4 {
   background-image: url('bild4.jpg');
   }
.bild_5 {
   background-image: url('bild5.jpg');
   }
.bild_6 {
   background-image: url('bild6.jpg');
   }
.bild_7 {
   background-image: url('bild7.jpg');
   }
.bild_8 {
   background-image: url('bild8.jpg');
   }
.bild_9 {
   background-image: url('bild9.jpg');
   }
.irgendein_text {
   text-align: center;
   font-size: 0.50em;
   height: 100%;
   margin-top: 2px;
   line-height: 1.5;
   }
</style>
</head>
<body>
   <div class="box">
      <div class="flex_item">
         <div class="div_mit_bild bild_1">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div class="div_mit_bild bild_2">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div  class="div_mit_bild bild_3">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div class="div_mit_bild bild_4">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div  class="div_mit_bild bild_5" >
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div  class="div_mit_bild bild_6">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div  class="div_mit_bild bild_7">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div  class="div_mit_bild bild_8">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
      <div class="flex_item">
         <div  class="div_mit_bild bild_9">
         </div>
         <div class="irgendein_text">
            irgendein Text
         </div>
      </div>
   </div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben