Bootstrap中的一列中的中心div

Question

所以我试图将一个列中的两个div放到页面的中心，这样它们之间几乎没有空间。 顶行是好的，但最下面的行引起了我的问题。 我想保持徽标与第一行的大小相同，并将它们集中在一起。 我已经展示了下面的内容。 附加代码。 任何投入将不胜感激。 谢谢！

  <div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
                    <div class="col-md-3 text-center">
                        <a href="http://www.msh.on.ca/" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png">
                        </a>
                    </div>
                    <div class="col-md-3 text-center">
                        <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a>
                    </div>
                    <div class="col-md-3 text-center">
                        <a href="http://www.southlakeregional.org/" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a>
                    </div>
                    <div class="col-md-3 text-center">
                        <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
                    </div>
                </div>

                 <div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
                    <div class="col-md-3 center-block">
                        <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
                    </div>
                    <div class="col-md-3 center-block">
                        <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
                    </div>
                </div>

Answer 1

尝试这个HTML，几乎没有修改：

    <div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
  <div class="col-md-3 text-center">
    <a href="http://www.msh.on.ca/" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png">
    </a>
  </div>
  <div class="col-md-3 text-center">
    <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a>
  </div>
  <div class="col-md-3 text-center">
    <a href="http://www.southlakeregional.org/" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a>
  </div>
  <div class="col-md-3 text-center">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
</div>

<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;">
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
</div>

修改后的HTML：

    <div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;">
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
</div>

演示： http ： //jsfiddle.net/lotusgodkk/GCu2D/2191/