Come posizionare due immagini affiancate in un div utilizzando il bootstrap?

Question

Voglio mettere due immagini affiancate in un div in cui entrambe le immagini sono al centro in div genitore. Sto usando bootstrap 3. plz aiuto

ecco la mia marcatura:

<div class="well text-center"> 
     <span>Sister Properties:</span> 
      <a href="#"><img src="img/innlogo.png" class="img-responsive" alt="inn_logo" /></a> <a href="#" ><img src="img/cclogo.png" class="img-responsive" alt="ccs_logo" /></a> 
    </div> 

non posso farlo usando "riga-colonna" div, ma voglio farlo utilizzando "bene" div.

Answer 1

La classe di risposta img-responsive dà alle immagini un valore display:block che impedisce loro di centrare; prova a rimuoverlo. Inoltre, per poterli affiancare utilizzare il sistema di griglia di Bootstrap. Puoi leggere maggiori informazioni qui: http://getbootstrap.com/css/#grid.

Ecco come si potrebbe fare questo:

Si può giocare con qui: http://www.bootply.com/YSlrhJHBls

EDIT: per rendere il centro di testo superiore aggiungere un 12 di larghezza col. Per assicurare le immagini sono all'interno del pozzo troppo, avvolgerli all'interno di una div con classe row come segue:

<div class="well text-center"> 
    <div class="col-md-12">Sister Properties:</div> 
    <div class="row"> 
     <div class="col-md-6"> 
      <a href="#"><img src="http://lorempixel.com/400/200/" alt="inn_logo"></a> 
     </div> 
     <div class="col-md-6"> 
      <a href="#"><img src="http://lorempixel.com/g/400/200/" alt="ccs_logo"></a> 
     </div> 
    </div> 
</div> 

Ecco l'aggiornamento bootply: http://www.bootply.com/TuXAsykG7e

Answer 2

Prova questa sul tuo css:

.well img{ 
display: inline-block; 
}