Question

我在页面底部有一个联系部分，其中包含企业的位置，电话和电子邮件。它设置为向左浮动，但我希望将整个事物对齐。我尝试了各种各样的东西，但我似乎无法让它工作。

http://pmg.dekastudiotest.net.au/index.html

==

/* CONTACT */
.contact{ width:100%; float:left; background:#003D98; }
.contact h2{ font-size:0;}
.contact figure{ float:left; margin-right:20px; margin-top:10px; margin-bottom:20px;}
.contact dl{ display:block;}
.contact dl dt{ font-size:18px; font-weight:700; color:#fff; margin-bottom:10px;}
.contact dl dd{ color:#fff; font-weight:500;}
.contact .container{ padding-bottom:80px; padding-top:100px; border-bottom:1px solid rgba(255,255,255,0.4);}

Answer 1

你可以使用类似的东西

#myDivCentered{
     position:absolute;/* or absolute */
     top:50%;
     left:50%;
}

Answer 2

是否有必要将所有三个保持为“col-md-3”。也许你可以把它改成这样的东西：

<div class="row">
      <div class="col-xs-12">
        <h2>CONTACT</h2>
      </div>
      <!-- end col-12 -->

  <div class="col-md-3 col-md-offset-1">
        <figure><img src="images/icon5.png" alt="Image"></figure>
        <dl>
          <dt>LOCATION</dt>
          <dd>Australia Wide Locations</dd>
        </dl>
      </div>
      <!-- end col-3 -->
      <div class="col-md-4">
        <figure><img src="images/icon6.png" alt="Image"></figure>
        <dl>
          <dt>PHONE</dt>
          <dd>+03 8761 4800 - National Reception</dd>

        </dl>
      </div>
      <!-- end col-4 -->
      <div class="col-md-3">
        <figure><img src="images/icon7.png" alt="Image"></figure>
        <dl>
          <dt>E-MAIL</dt>
          <dd>healthcare@pmg.com.au</dd>
        </dl>
      </div>
      <!-- end col-3 -->

      <!-- end col-3 --> 
    </div>

PS：我刚刚为第一个col-md-3添加了一个偏移量，并将第二个添加到了col-md-4。如果那是你想要达到的目的。

Answer 3

您需要像这样更改div结构 -

<div class="col-xs-12"></div>
<div class="col-md-3 col-md-offset-1"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

＆＃13;

/* CONTACT */
.contact{ width:100%; float:left; background:#003D98; }
.contact h2{ font-size:0;}
.contact figure{ float:left; margin-right:20px; margin-top:10px; margin-bottom:20px;}
.contact dl{ display:block;}
.contact dl dt{ font-size:18px; font-weight:700; color:#fff; margin-bottom:10px;}
.contact dl dd{ color:#fff; font-weight:500;}
.contact .container{ padding-bottom:80px; padding-top:100px; border-bottom:1px solid rgba(255,255,255,0.4);}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section class="contact" style="margin-left:auto;
   margin-right:auto;
   display:center;">
  <div class="container wow fadeInUp">
    <div class="row" >
      <div class="col-xs-12">
        <h2>CONTACT</h2>
      </div>
      <!-- end col-12 -->
     
    <div class="col-md-3 col-md-offset-1">
        <figure><img src="images/icon5.png" alt="Image"></figure>
        <dl>
          <dt>LOCATION</dt>
          <dd>Australia Wide Locations</dd>
        </dl>
      </div>
      <!-- end col-3 -->
      <div class="col-md-4">
        <figure><img src="images/icon6.png" alt="Image"></figure>
        <dl>
          <dt>PHONE</dt>
          <dd>+03 8761 4800 - National Reception</dd>

        </dl>
      </div>
      <!-- end col-3 -->
      <div class="col-md-4">
        <figure><img src="images/icon7.png" alt="Image"></figure>
        <dl>
          <dt>E-MAIL</dt>
          <dd>healthcare@pmg.com.au</dd>
        </dl>
      </div>
      <!-- end col-3 -->
     
      <!-- end col-3 --> 
    </div>
    <!-- end row --> 
  </div>
  <!-- end container --> 
</section>

＆＃13;

我希望它会对你有所帮助。

Answer 4

<section class="contact">
<div class="container wow fadeInUp">
<div class="row">

<div class="col-xs-12">
<h2>CONTACT</h2>
</div>
<!-- end col-12 -->

<div class="col-md-4">
<figure><img src="images/icon5.png" alt="Image"></figure>
<dl>
<dt>LOCATION</dt>
<dd>Australia Wide Locations</dd>
</dl>
</div>

<!-- end col-3 -->
<div class="col-md-4">
<figure><img src="images/icon6.png" alt="Image"></figure>
<dl>
<dt>PHONE</dt>
<dd>+03 8761 4800 - National Reception</dd>

</dl>
</div>

<!-- end col-3 -->
<div class="col-md-4">
<figure><img src="images/icon7.png" alt="Image"></figure>
<dl>
<dt>E-MAIL</dt>
<dd>healthcare@pmg.com.au</dd>
</dl>
</div>

<!-- end col-3 --> 
</div>  
<!-- end row --> 
</div>
<!-- end container --> 
</section>

我没有对你的CSS做过任何修改。刚修改了更改为col-m的部分中的col-md到col-md-3。如果有任何澄清，请随时询问。

中心对齐一个部分

4 个答案: