Question

我希望两个图像并排居中。我尝试了很多东西但是当我试图改变宽度时（因为图像太大）我有一些距离而且不行。我希望图像在桌面和移动设备上并排放置。

<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>

Answer 1

＆＃13;

.img_wrapper{
  display:flex;
  margin:0 auto;
  width:300px;
  height:300px;
  border:thin black solid;
}

.images{
  margin: auto;
}

p{
  text-align:center;
}

img{
  width:125px;
  height:125px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">


<div class="img_wrapper">
<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>

<div class="images">
<a href="#">
<img class="img-responsive" src="http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg" >
</a>
<p>
TST
</p>
</div>
</div>


</div>

＆＃13;

这与您正在寻找的相同吗？

这是JSFiddle

希望这有帮助。

Answer 2

尝试类似：

<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>

过去当我不得不做类似事情时，它对我有用......

希望它也适合你

Answer 3

已编辑的答案

当您使用Bootstrap时（请参阅下面的评论）您可以使用Boostrap柱系统使图像居中。

请参阅 here 我已经更新了CSS，我们已经创建了一个新的col-no-padding类，您可以在任何地方使用它，因为它可以消除guttering in添加了列，然后添加了一些基本链接和图像样式：

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

.image-wrapper a {
  display: block;
}

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

HTML整理;利用Bootstraps列和行结构：

<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>

Answer 4

我会用Flexbox做到这一点 - 如果你可以通过一点点缺少浏览器支持来生活（但在我看来它是可用的）。

“.row”-div的代码（如果你使用Bootstrap，给它一个额外的类）将在CSS中（没有供应商前缀）：

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-itmes: center;
}

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

这里使用的主要flexbox-guide：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我希望我的回答很有帮助。

图像并排和居中

4 个答案: