html - Thumbnal images not aligningn horizontally -


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>    <div class="container-fluid">    <div class="row">      <div class="col-md-4"><br><br><img src="images\smartphone.png" class="img-circle" alt="" width="243" height="241" align="middle"><br><h4  style="color:#1e7145" align="center">smart phone</h4></div>         <div class="col-md-4"><br><br><img src="images\oldphone.png" class="img-circle" alt="" width="243" height="241" align="middle"><br><h4 style="color:#1e7145" align="center">basic phone</h4></div>        <div class="col-md-4"><br><br><img src="images\tab.png" class="img-circle" alt="" width="243" height="241" align="middle"><br><h4 style="color:#1e7145" align="center">tablet</h4></div>    </div>  </div>

the thumbnail images not aligned center.however texts aligned center.the images aligned left.is there solution?

please try following code using flex:

.imager div{     display: flex;     flex-direction: column;     align-items: center;     justify-content: center;  } 

<div class="container-fluid">     <div class="row imager">         <div class="col-md-4"><br><br><img src="images\smartphone.png" class="img-circle" alt="" width="243" height="241" align="middle"><br><h4  style="color:#1e7145" align="center">smart phone</h4></div>         <div class="col-md-4"><br><br><img src="images\oldphone.png" class="img-circle" alt="" width="243" height="241" align="middle"><br><h4 style="color:#1e7145" align="center">basic phone</h4></div>         <div class="col-md-4"><br><br><img src="img-circle" class="img-circle" alt="" width="243" height="241" align="middle"><br><h4 style="color:#1e7145" align="center">tablet</h4></div>     </div> </div> 

Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -