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
Post a Comment