• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Problema risolto Div in allineamento orizzontale

gedamial

Utente Senior
9 Giugno 2010
1.934
26
52
Napoli
www.ministryofmagic.altervista.org
Miglior risposta
0
#1 Autore del topic
Salve.

Ho questo piccolo, banale e stupido problemino. Se devo allineare 2 div sulla stessa linea tutto bene perchè utilizzo il float. Ma se ne devo allineare 3 non so farlo perché non posso usare float: center; perchè non esiste :emoji_relieved:


CODICE PAGINA:
Codice:
<html>
<head>
<style type="text/css">
body {
background-color: black;
}

#apple {
margin-top: -9px;
background-color: grey;
text-align: center;
color: white;
width: 300px;
height: 140px;
}

#android {
color: white;
margin-left: -9px;
background-color: green;
width: 300px;
height: 140px;
text-align: center;
float: left;
}

#wp {
color: white;
margin-right: -9px;
background-color: turquoise;
width: 300px;
height: 140px;
text-align: center;
float: right;
}
</style>
<title>OS</title>
</head>
<body>

<center>
<div id="apple">
Apple iOS
</div>
</center>


<div id="android">
Android
</div>

<div id="wp">
Windows Phone
</div>
</body>
</html>
Come allineo tre DIV sulla stessa linea orizzontale?


UN ALTRA COSA!!!

Se testate il codice potrete vedere che i testi "Android", "Apple" ecc... sono allineati al centro della linea di sopra ma non IN PIENO CENTRO DEL DIV.

Come lo centro completamente?


Grazie in anticipo!
 

Donpeo117

Utente Assiduo
9 Maggio 2010
500
5
42
Roma
www.matteoerrera.com
Miglior risposta
0
#2
Ciao, così dovrebbe andare:

Codice:
<html>
<head>
<title>OS</title>
</head>
<body>
<div style="width:900px; height:140px; margin:0 auto;">
<div id="apple" style="float:left; display:block; width:300px; height:140px; background-color:grey;"></div>
<div id="android" style="float:left; display:block; width:300px; height:140px; background-color:green;"></div>
<div id="wp" style="float:left; display:block; width:300px; height:140px; background-color:turquoise;"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Per testare il sito su più browser puoi usare questo servizio gratuito: https://browserling.com, mentre per testare le varie risoluzioni questo: Screenfly / Test Your Website at Different Screen Resolutions
 

gedamial

Utente Senior
9 Giugno 2010
1.934
26
52
Napoli
www.ministryofmagic.altervista.org
Miglior risposta
0
#3 Autore del topic
Ciao, così dovrebbe andare:

Codice:
<html>
<head>
<title>OS</title>
</head>
<body>
<div style="width:900px; height:140px; margin:0 auto;">
<div id="apple" style="float:left; display:block; width:300px; height:140px; background-color:grey;"></div>
<div id="android" style="float:left; display:block; width:300px; height:140px; background-color:green;"></div>
<div id="wp" style="float:left; display:block; width:300px; height:140px; background-color:turquoise;"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
Per testare il sito su più browser puoi usare questo servizio gratuito: https://browserling.com, mentre per testare le varie risoluzioni questo: Screenfly / Test Your Website at Different Screen Resolutions
Grazie mille :emoji_slight_smile:

Sai mica rispondermi alla seconda domanda?
 
Shoutbox
  1. #KiK #KiK: CAFONE
  2. #KiK #KiK: ma come parla
  3. 404NotFound 404NotFound: figa
  4. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  5. Cristoforo58 Cristoforo58: Sono vietati link esterni a Sciax2 in shoutbox, grazie.
  6. Mr_Joker Mr_Joker: vi ricordiamo che domani pomeriggio dalle 2-5pm "Sunake Hotel" apre le selezioni a diverse posizione staff.
  7. Forzaese23 Forzaese23: retro babbo
  8. #KiK #KiK: createlo amikoooo
  9. B bbhojjjj76: fake login habbo ne avete?
  10. N NeroWhite BO: Buonasera
  11. #Egzon14 #Egzon14: dunque possiamo definirli morti i retro
  12. #Egzon14 #Egzon14: habbo passerà ad unity
  13. #KiK #KiK: ma infatti
  14. #Egzon14 #Egzon14: ancora con sti retro habbo
  15. M mikiamo2012: Qualcuno per creare retro habbo?
  16. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  17. #KiK #KiK: e poi ci sono io che vado a sorseggiare un po di kaffè su habbo inglese
  18. #Egzon14 #Egzon14: è proprio morto sciax2
  19. #KiK #KiK: Amiciii come statee
  20. #KiK #KiK: Cerco staff per la mia kaffetteriaaaa
  21. LogR LogR: Cerco tutto lo staff per il mio retroserver
  22. LogR LogR: https://www.sciax2.it/forum/threads/cerco-team-progetto-pronto.700516/
  23. A AnonymousOwna: Lubex Hotel è online vi aspetto
  24. ..Vortix.. ..Vortix..: Sì, penso ci sia la categoria adatta
  25. A Antonyblind: Qui si possono pubblicare metodi di guadagno???
Top