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进行少量修改：

    int startPage = 17;
    int endPage = 18;
    String fn = "original.pdf";
    String resFn = "result.pdf";
    PDDocument doc = PDDocument.load(new File(fn), MemoryUsageSetting.setupMixed(1024 * 1024));
    int cnt = doc.getNumberOfPages();
    for (int i = cnt - 1; i > endPage; i--) {
        doc.removePage(i);
    }
    for (int i = startPage - 1; i >= 0; i--) {
        doc.removePage(i);
    }
    doc.save(new FileOutputStream(resFn));

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

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

Bootstrap中的一列中的中心div

1 个答案: