Html 图像并排居中

我想要两个并排居中的图像。我试过很多方法，但当我试图改变宽度时（因为图像太大），我有一些距离，这是不好的。我想在桌面和手机上并排放置图像

<div class="row" style="text-align:center;"">

                        <div style="display:inline-block;">
                            <a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
                            <p class="text-center" style="font-size:1.2em">TST</p>
                        </div>
                        <div style="display:inline-block;"> 
                            <a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist"  src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
                            <p class="text-center" style="font-size:1.2em">STS</p>
                        </div>

                </div>

.img\u包装器{
显示器：flex；
保证金：0自动；
宽度：300px；
高度：300px；
边框：薄黑色实心；
}
.图像{
保证金：自动；
}
p{
文本对齐：居中；
}
img{
宽度：125px；
高度：125px；
}


TST


TST

尝试以下方法：

<style type="text/css">
    #left{
        float:left;
        width:20%;
        overflow:hidden;
        margin-left: 1%;
    }
    #right{
        overflow:hidden;
    }
</style>

 <div class="row">
        <div id="left">
            <a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist" src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
            <p class="text-center" style="font-size:1.2em">TST</p>
        </div>
     <div id="right">
            <a style="display:inline;" href="#"><img style="display: inline-block; margin-left: auto;margin-right: auto;" class="img-responsive item-wishlist"  src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" /></a>
            <p class="text-center" style="font-size:1.2em">STS</p>
        </div>
</div>


#左{
浮动：左；
宽度：20%；
溢出：隐藏；
左缘：1%；
}
#对{
溢出：隐藏；
}
TST
STS

在过去，当我不得不做一些类似的事情时，它对我起了作用

希望它也能对您有所帮助
编辑答案

当您使用Bootstrap时（请参阅下面的注释），您可以使用Bootstrap列系统将图像居中

请参见我已经更新了CSS，创建了一个新的col no padding类，您可以在任何地方使用，因为它去除了列中的排水沟，然后添加了一些基本链接和图像样式：

 .col-no-padding {
  padding-left:0;
  padding-right:0;
}

.image-wrapper a {
  display: block;
}

.image-wrapper img {
  width:100%;
}

HTML整理好了；利用引导列和行结构：

<div class="row">
  <div class="col-xs-3 col-xs-offset-3 col-sm-2 col-sm-offset-4 col-no-padding">
    <div class="image-wrapper">
      <a ref="">
        <img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
      </a>
      <p class="text-center" style="font-size:1.2em">TST</p>
    </div>
  </div>
  <div class="col-xs-3 col-sm-2 col-no-padding">
    <div class="image-wrapper">
      <a ref="">
        <img src="http://www.blindfiveyearold.com/wp-content/uploads/2011/01/homer-simpson-150x150.jpg" alt="" class="img-responsive" />
      </a>
      <p class="text-center" style="font-size:1.2em">TST</p>
    </div>
  </div>
</div>


TST
TST
我会用Flexbox来实现这一点——如果你能在缺少一点浏览器支持的情况下生活（但我认为它是可用的）

“.row”-div的代码（如果使用Bootstrap，则为其提供一个额外的类）将使用CSS（无供应商前缀）：

这样，只要内部元素彼此适合，并且在元素中垂直居中，它们就彼此相邻

这里是我使用的主要flexbox指南：

我希望我的回答是有帮助的。
看这里看起来是的@samayo你是对的我检查了这个问题，这没有问题，我想他想要更多的东西你是否在使用bootstrap@Geor1947，因为你似乎在使用一些类似的HTML类，比如：
img responsive
和
row
就是这样..但我也想把它放在手机上…图片下没有图片OK没问题，在我编辑我的答案以进一步帮助之前，你能告诉我你是否在使用bootstrap吗？我已经为你更新了我的答案@Geor1947，CSS已经更改，以确保图像在桌面和移动设备上并排显示。看看我更新的fiddle链接也可以，但我希望图像更小..就像上一个fiddle..一样..并保持居中。首先请接受我的回答，其次如果您希望图像更小，只需将此div
上的宽度更改。图像包装器
从
50%
更改为您想要的任何宽度。我还问你是否使用引导，你能回答吗@乔治1947我不能在这里做所有的工作，你也需要帮助我，至少回答一个简单的问题。谢谢
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-itmes: center;
}