4中心图像HTML/CSS自举

我把它给我的屏幕上工作，但是当我把它更大的显示器上似乎并没有扩展的权利。任何建议？

<div style="margin-left: 100px;margin-right: 100px;"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-sm-3"> 
       <img src="img/NUESTROS EVENTOS -1.png"> 
      </div> 
      <div class="col-sm-3"> 
       <img s src="img/NUESTROS EVENTOS -2.png"> 
      </div> 
      <div class="col-sm-3"> 
       <img src="img/NUESTROS EVENTOS -3.png"> 
      </div> 
      <div class="col-sm-3"> 
       <img src="img/NUESTROS EVENTOS -5.png"> 
      </div> 
     </div> 
    </div>

这就是我得到这个其他代码，焦点，但无法摆脱的空间。

---这是我得到的---

<div class="row" style="margin-bottom: 70px;"> 
    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow bounceInLeft "> 
     <div class="thumbnail "> 
      <img src="img/NUESTROS EVENTOS -1.png"> 
     </div> 
    </div> 
    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow bounceInLeft "> 
     <div class="thumbnail"> 
      <img src="img/NUESTROS EVENTOS -2.png"> 
     </div> 
    </div> 
    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow swing "> 
     <div class="thumbnail"> 
      <img src="img/NUESTROS EVENTOS -3.png"> 
     </div> 
    </div> 
    <!-- column --> 

    <!-- column --> 
    <div class="col-xs-6 col-sm-5cols wow bounceInRight "> 
     <div class="thumbnail"> 
      <img src="img/NUESTROS EVENTOS -5.png"> 
     </div> 
    </div> 
</div>

来源

2017-04-07 Rodolfo Rodriguez

可以还张贴你的CSS，另外，我不是真的确定你在问什么？水平居中？垂直？截图视觉上正确或不正确？ –

是所有图像的宽度和高度相同吗？ –

你想要的输出是什么？你是否尝试使用img-responsive这个类作为img标记/ –

您可以使用inline-block元素，我已经创建inline-block类来包装img，给text-center类row对齐图片在中心。

.row-custom .inline-block{ 
 
    display:inline-block; 
 
} 
 
.row-custom .inline-block img{ 
 
    max-width:100px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-custom text-center"> 
 
    <div class="inline-block"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
    <div class="inline-block"> 
 
    <img s src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
    <div class="inline-block"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
    <div class="inline-block"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300"> 
 
    </div> 
 
</div>

来源

2017-04-07 10:04:35

但是，如果窗口变大，图像之间获得空间 –

更新回答，检查一次 –

谢谢。终于明白了，我遇到了问题。 –

做这些三件事情的愿望得以实现result-

.img-responsive类添加到您的img标签作为其使图像响应的方式引导框架。您也可以查看此link以供参考。

2.将宽度=“100％”添加到图像以占用图像中可用的全部空间。

3.将nopadding类添加到列，以便它将删除填充空间。

更新您的代码如下：

.nopadding { 
 
    padding: 0 !important; 
 
    margin: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img src="https://dummyimage.com/600x400/000/fff" width="100%" class="img-responsive"> 
 
    </div> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img s src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%"> 
 
    </div> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%"> 
 
    </div> 
 
    <div class="col-xs-3 nopadding"> 
 
    <img src="https://dummyimage.com/600x400/000/fff" class="img-responsive" width="100%"> 
 
    </div> 
 
</div> 
 
</div>

来源

2017-04-07 10:01:28

该类确实使图像响应，但仅当窗口很小时，例如：[link]（http ：//imgur.com/a/RE1IN），如果窗口变大：[链接]（http://imgur.com/a/FD7SX）图像获取空间我不想要这些空间。感谢您的帮助 –

没有问题我已经更新了我的答案..希望它可以帮助 –

感谢您的帮助！它的工作太 –

不需要更改或添加更多到CSS，您可以使用引导类：

<div class="row"> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -1.png"> 
    </div> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -2.png"> 
    </div> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -3.png"> 
    </div> 
    <div class="col-sm-3"> 
     <img class="img-responsive center-block" src="img/NUESTROS EVENTOS -5.png"> 
    </div> 
</div>

来源

2017-04-07 10:10:13

4中心图像HTML/CSS自举

回答

相关问题