Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2014
    Messaggi
    21

    Allineare più immagini in linea

    Ciao a tutti, sto cercando di posizionare due loghi nell'header del sito. Un logo deve essere allineato a sinistra, l'altro centrale. Seguendo varie guide online dicono di fare così nei CSS:
    codice:
    margin: 0 auto;
    display: block;
    Io ho fatto così:
    codice:
    #logosx {
      text-align: left;
      height: 36px;
    }
    
    #logocen {
      margin: 0 auto;
      height: 36px;
    }
    Ma il logo non viene centrato. Usando il codice che ho trovato le due immagini vengono messe su due righe e questo non va bene. L'unico modo che ho trovato è quello di utilizzare l'HTML racchiundendo l'immagine in un tag center, ma volevo farlo con i CSS.

    Cosa stò sbagliando?

    HTML:
    codice:
    <img src="img/designhubs_logo.png" id="logocen" alt="logo designhubs" id="logocen">
    <img src="img/sos3dprinting_logo_small.png" id="logosx" alt="logo sos3dprinting.com" id="logosx">

  2. #2
    Utente di HTML.it L'avatar di stoneweb
    Registrato dal
    Jul 2016
    residenza
    San Mauro Torinese
    Messaggi
    150
    Provo a darti una possibile soluzione:

    codice:
    #logosx {
    	height: 36px;
    }
    
    
    #logocen {
    	height: 36px;
    }
    
    
    .col {
    	width: 33.333%;
    }
    .text-center {
    	text-align: center;
    }
    codice:
    <div style="display: flex;">    
    	<div class="col">
    		<img src="img/sos3dprinting_logo_small.png" id="logosx" alt="logo sos3dprinting.com" id="logosx">
    	</div>
    	<div class="col text-center">
    		<img src="img/designhubs_logo.png" id="logocen" alt="logo designhubs" id="logocen">
    	</div>
    	<div class="col"></div>
    </div>
    Work hard. Code harder.

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2014
    Messaggi
    21
    Grazie della risposta, ho provato a fare come dici te aggiungendo due pulsanti nella terza sezione (che tu avevi lasciato vuota). Le tre sezioni però non vengono visualizzate in linea, ma su tre righe diverse

  4. #4
    Utente di HTML.it L'avatar di stoneweb
    Registrato dal
    Jul 2016
    residenza
    San Mauro Torinese
    Messaggi
    150
    Sei sicuro di aver messo il "display: flex;" al div che contiene le tre colonne?
    Work hard. Code harder.

  5. #5
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,614
    A proposito di css Flex puoi guardare la guida qui. Solo usando flex potresti trovare un soluzione semplice de implementare

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.