Mehrere Divs zentrieren

chuvak · 15. Juni 2011

Innerhalb meines Footers sind noch 4 weitere Divs platziert.
Ich möchte, dass diese entweder dynamisch den gesamten Footer ausfüllen oder mit einer festen Breite alle zentriert platzieren.
Das Erstere wäre etwas besser, aber, wie ich denke, komplizierter.

Hat jemand eine Lösung?

HTML:

        <div class="footer">
          <div class="footer1">
            <h2>KONTAKT</h2>
            <a href="#">info(at)bla.de</a><br />
            <a href="#"><img src="media/img/xing.png" alt="Xing" /></a><br />
            <a href="#"><img src="media/img/linkedin.png" alt="LinkedIn" /></a>
          </div>

          <div class="footer2">
            <h2>W3C</h2>
            <a href="http://validator.w3.org/check?uri=referer"><img
                src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer">
              <img style="border:0;width:88px;height:31px"
                   src="http://jigsaw.w3.org/css-validator/images/vcss"
                   alt="CSS ist valide!" />
            </a>
          </div>

          <div class="footer3">
            <h2>Language / Sprache</h2>
            <a href="#"><img src="media/img/germany.png" alt="German" height="20" /></a> <a href="#"><img src="media/img/uk.png" height="20" alt="English" /></a>
          </div>
                   
          <div class="footer4">
            <h2>FOOTER NOTES</h2>
            (c) 2011 <br />
            <a href="#">Sitemap</a><br />
            Made with <a href="#"><img src="media/img/typo3.png" alt="Typo3" /></a>
          </div>     
          
        </div>

Code:

.footer
{
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1A1A1A;
  color: #a9a9a9;
  border-top: 8px solid #2F2F2F;
  padding: 10px 40px 50px;
  font-size: 0.7em;
  overflow: hidden;	
  line-height: 1.5em;
}
.footer div
{
  float: left;
  padding: 10px;
}

hela · 16. Juni 2011

Hallo,

ich würde zum Zentrieren innerhalb des Footer-Blockes einen weiteren Block ("centerDiv") einsetzen. Etwa so:

HTML:

<div class="footer">

  <div class="centerDiv">

    <div class="footer1">
      <h2>KONTAKT</h2>
      <a href="#">info(at)bla.de</a><br />
      <a href="#"><img src="media/img/xing.png" alt="Xing" /></a><br />
      <a href="#"><img src="media/img/linkedin.png" alt="LinkedIn" /></a>
    </div>

    <div class="footer2">
      <h2>W3C</h2>
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
      </a>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS ist valide!" />
      </a>
    </div>

    <div class="footer3">
      <h2>Language / Sprache</h2>
      <a href="#"><img src="media/img/germany.png" alt="German" height="20" /></a>
      <a href="#"><img src="media/img/uk.png" height="20" alt="English" /></a>
    </div>

    <div class="footer4">
      <h2>FOOTER NOTES</h2>
      (c) 2011 <br />
      <a href="#">Sitemap</a><br />
      Made with <a href="#"><img src="media/img/typo3.png" alt="Typo3" /></a>
    </div>

  </div>

</div>

Dann könntest du so formatieren:

CSS:

.footer {
  float: left;
  width: 100%;
  background-color: #1A1A1A;
  color: #a9a9a9;
  border-top: 8px solid #2F2F2F;
  padding: 10px 0 50px;
  font-size: 0.7em;
  overflow: hidden;
  line-height: 1.5em;
}
.centerDiv {
  float: left;
  position: relative;
  left: 50%;
}
.centerDiv div {
  float: left;
  position: relative;
  right: 50%;
  padding: 10px;
}

Diese Methode wird hier sehr gut beschrieben: Horizontally Centered Menus with no CSS hacks

Mehrere Divs zentrieren

chuvak

Erfahrenes Mitglied

hela

Neue Beiträge