Aswin Aswin - 1 month ago 10
CSS Question

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 are not aligned to the center.However the texts are aligned to center.The images are aligned to the left.Is there a solution?

Answer

Please try the 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>