how to center thumbnails on a web page?

Navigation
1
<div class="row">
<div class="col-md-3">
  <div>
    <a href="#">
      <img src="https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg" class="rounded img-thumbnail img-responsive">
    </a>
  </div>
</div>
<div class=" col-md-3">
  <div>
    <a href="#">
      <img src="https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg" class="rounded img-thumbnail img-responsive">
    </a>
  </div>
</div>
<div class="col-md-3" >
  <div>
    <a href="#">
      <img src="https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg" class="rounded img-thumbnail img-responsive">
    </a>
  </div>
</div>

What I want to do is that the 3 images appear centered on the page. How can it be done?

    
asked by facundo rotger 09.02.2018 в 01:20
source

2 answers

2

You can center using flexbox 

<style type="text/css">
   .centrado{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
   }
</style>

That would be in your container padre , or you can also several the center by space-between or space-around , depends how you like best

    
answered by 09.02.2018 / 01:32
source
0

You can add a new class to your document; 

  <style type="text/css">
   .centrar_contenido{
  text-align: center;
}

your html would be like this; 

  <div class="row centrar_contenido">
<div class="col-md-3">
  <div>
    <a href="#">
      <img src="https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg" class="rounded img-thumbnail img-responsive">
    </a>
  </div>
</div>
<div class=" col-md-3">
  <div>
    <a href="#">
      <img src="https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg" class="rounded img-thumbnail img-responsive">
    </a>
  </div>
</div>
<div class="col-md-3" >
  <div>
    <a href="#">
      <img src="https://i.ytimg.com/vi/kpvKA0vhaT0/maxresdefault.jpg" class="rounded img-thumbnail img-responsive">
    </a>
  </div>
</div>
    
answered by 09.02.2018 в 01:24
Use a variable as a file name? Pass a String obtained from a database to the src of an image