Allineare più immagini in linea

[TimoFran]

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:

margin: 0 auto;
display: block;

Io ho fatto così:

#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:

<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">

[stoneweb]

Provo a darti una possibile soluzione:

#logosx {
	height: 36px;
}


#logocen {
	height: 36px;
}


.col {
	width: 33.333%;
}
.text-center {
	text-align: center;
}

<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>

[TimoFran]

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

[stoneweb]

Sei sicuro di aver messo il "display: flex;" al div che contiene le tre colonne?

[m4rko80]

A proposito di css Flex puoi guardare la guida qui. Solo usando flex potresti trovare un soluzione semplice de implementare