login  Naam:   Wachtwoord: 
Registreer je!
 Forum

centreren div's naast elkaar (Opgelost)

Offline adventure - 28/04/2014 21:05 (laatste wijziging 28/04/2014 22:18)
Avatar van adventureNieuw lid Het lukt me niet om 2 div's naast elkaar te plaatsen en tevens te centreren. Zoals de code nu is plaatsen de div's zich naar links.

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #logo {
  2. font-size: 50px;
  3. font-family: arial;
  4. margin-top: 30px;
  5. text-align: center;
  6. float: left;
  7. max-width: 1260px;
  8. }
  9.  
  10. #logo1 {
  11. color: #FF0000;
  12. float: left;
  13. text-align: center;
  14. }
  15.  
  16. #logo2 {
  17. color: #000000;
  18. margin-left: 20px;
  19. float: left;
  20. text-align: center;
  21. }


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="logo">
  2.         <div id="logo1">Logo1</div>
  3.         <div id="logo2">Logo2</div>
  4.    </div>

3 antwoorden

Gesponsorde links
Offline Thomas - 28/04/2014 22:11 (laatste wijziging 28/04/2014 22:13)
Avatar van Thomas Moderator Het codefragment bevat paragrafen, geen divs?

Is het een optie om met vaste breedtes te werken? Dat maakt het centreren waarschijnlijk een stuk makkelijker.

EDIT: omdat je geen block (level) elementen gebruikt en ook geen breedtes zal het centreren sowieso nooit lukken denk ik, er valt simpelweg niets te centreren door de afwezigheid hiervan.
Offline adventure - 28/04/2014 22:21
Avatar van adventure Nieuw lid Ik heb de code wat aangepast.
Offline Thomas - 28/04/2014 22:53 (laatste wijziging 28/04/2014 22:54)
Avatar van Thomas Moderator Als je logo1 en logo2 een vaste breedte kunt geven is het centreren eenvoudig, je centreert de container-div (#logo) door deze de juiste breedte te geven in combinatie met een auto-margin. Als je hierbij een "goot" wilt hebben tussen logo1 en logo2 dan kan dit ook, hier moet je dan gewoon rekening mee houden in de berekening van de breedte.

Voorbeeld:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>div centreer test</title>
  6. <style type="text/css">
  7. <!--
  8. div.logo    { margin: 0 auto; width: 510px; } /* 2 X de breedte van logo + goot van 10px */
  9.  
  10. /* mogelijk heb je aan één logo klasse genoeg als deze dezelfde opmaak hebben */
  11. div.logo1   { display: block; float: left; width: 250px; height: 100px; background-color: #ffcccc; margin-right: 10px; text-align: center; }
  12. div.logo2   { display: block; float: left; width: 250px; height: 100px; background-color: #ccccff; text-align: center; }
  13. //-->
  15. </head>
  16.  
  18. <div class="logo">
  19.     <div class="logo1">één</div>
  20.     <div class="logo2">twee</div>
  21. </div>
  22. </body>
  23. </html>


EDIT: nota bene, text-align: center centreert alleen de (tekstuele) inhoud.
Bedankt door: adventure
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.177s