缩略图图像未水平对齐

Posted 2023-03-29

【中文标题】缩略图图像未水平对齐

【英文标题】：Thumbnal images not aligningn horizontally

【发布时间】：2017-03-19 18:44:56

【问题描述】：

<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"    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"    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"    align="middle"><br><h4 style="color:#1E7145" align="center">Tablet</h4></div>
  </div>
</div>

缩略图未居中对齐，但文字居中对齐。图片居左对齐。有解决办法吗？

【问题讨论】：

你试过<div class="col-md-4 text-center"> ...吗？

【参考方案1】：

请使用 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"    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"    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"    align="middle"><br><h4 style="color:#1E7145" align="center">Tablet</h4></div>
    </div>
</div>

【参考方案2】：

.col-md-4 
 text-align:center;

 <div class="container-fluid">
 <div class="row">
 <div class="col-md-4"><br><br><img src="images\smartphone.png" class="img-circle"    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"    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"    align="middle"><br><h4 style="color:#1E7145" align="center">Tablet</h4></div>
</div>
</div>