Visualizzazione dei risultati da 1 a 4 su 4

Discussione: centrare un div

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    30

    centrare un div

    buonasera a tutti, ogni tanto sono qui a chiedere qualche info, sto creando una home page e non riesco a centrare il div che ho creato, riesco a posizionarlo a dx o a sx, ma non al centro.
    Vorrei che in caso di risoluzioni inferiori i div si posizionino a capo ma al centro, l'esempi più comune è la visualizzazione su telefono.
    Ringrazio fin da ora chi mi da una dritta.
    quello che ho creato è questo:

    <div id="contenitore-servizi">
    <div class="servizio">
    <img src="https://www.auto-doc.it//pkw/images/delivery-page/flags/it.png" />
    <p class="titolo-servizio">consegna veloce</p>
    <p>xxxxxxx ha sempre avuto un trattamento speciale, con sconti che possono arrivare fino al 20% su tutto il
    nostro catalogo prodotti.<br />
    <a title="Spese "
    href="https://www.html.it">tutte
    le info »</a></p></div>
    <div class="servizio">
    <img src="https://www.auto-doc.it//pkw/images/delivery-page/flags/it.png" />
    <p class="titolo-servizio">consegna veloce</p>
    <p>xxxxxxx ha sempre avuto un trattamento speciale, con sconti che possono arrivare fino al 20% su tutto il
    nostro catalogo prodotti.<br />
    <a title="Spese "
    href="https://www.emporiodelloscooter.com/blog/ritiro_in_negozio">tutte
    le info »</a></p></div>
    <div class="servizio">
    <img src="https://www.auto-doc.it//pkw/images/delivery-page/flags/it.png" />
    <p class="titolo-servizio">consegna veloce</p>
    <p>xxxxxxx ha sempre avuto un trattamento speciale, con sconti che possono arrivare fino al 20% su tutto il
    nostro catalogo prodotti.<br />
    <a title="Spese "
    href="https://www.emporiodelloscooter.com/blog/ritiro_in_negozio">tutte
    le info »</a></p></div>
    <div class="servizio">
    <img src="https://www.auto-doc.it//pkw/images/delivery-page/flags/it.png" />

    <p class="titolo-servizio">consegna veloce</p>
    <p>xxxxxxx ha sempre avuto un trattamento speciale, con sconti che possono arrivare fino al 20% su tutto il
    nostro catalogo prodotti.<br />
    <a title="Spese "
    href="https://www.emporiodelloscooter.com/blog/ritiro_in_negozio">tutte
    le info »</a></p></div></div>


    <style>
    .servizio {
    width: 280px;
    float: right;
    padding: 5px;
    margin: 5px;
    background:cornflowerblue;
    color: #fff;
    }
    .servizio img {
    display: block;
    margin: 0 auto;
    }
    .servizio p {
    font-weight: 300;
    text-align: center!important;
    }
    .titolo-servizio {
    text-transform: lowercase;
    letter-spacing: 2.5px;
    padding-top: 10px;
    font-weight: 500!important;
    }
    </style>

  2. #2
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2012
    Messaggi
    30
    salve Carlo, lo avevo già visto, ma non riesco ad ottenere il risultato, mi riesce con un solo div, ma con 4 div, mi si annullato 3 e ne rimane visibile uno solo.

  4. #4
    Utente di HTML.it
    Registrato dal
    Apr 2007
    Messaggi
    692
    Prova a mettere i tuoi 4 div all'interno di un altro div dove metti solo text-align:center;
    Nella classe "servizio", togli float:right e metti display: inline-block;
    Ultima modifica di Roby140569; 05-12-2019 a 11:31

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.