中心對齊部分

我在頁面底部有一個聯繫人部分，其中包含了某個商家的位置，電話和電子郵件。它的設置向左浮動，但我希望中心對齊整個事情。我曾嘗試過各種各樣的事情，但我似乎無法使其發揮作用。中心對齊部分

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);}

<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"> 
 
     <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-3"> 
 
     <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-6"> 
 
     <figure><img src="images/icon7.png" alt="Image"></figure> 
 
     <dl> 
 
      <dt>E-MAIL</dt> 
 
      <dd>[email protected]</dd> 
 
     </dl> 
 
     </div> 
 
     <!-- end col-3 --> 
 
     
 
     <!-- end col-3 --> 
 
    </div> 
 
    <!-- end row --> 
 
    </div> 
 
    <!-- end container --> 
 
</section>

來源

2015-10-26 David

是否有必要全部三個保持爲「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>[email protected]</dd> 
     </dl> 
     </div> 
     <!-- end col-3 --> 

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

PS：我剛添加的偏移到第一COL-MD-3，以及改變第二個對col-MD-4。如果這就是你想要達到的目標。

來源

2015-10-26 04:37:26 Shivi

您可以使用類似的東西

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

來源

2015-10-26 04:37:13

你需要改變你喜歡這個 -

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

/* 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);}

<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>[email protected]</dd> 
 
     </dl> 
 
     </div> 
 
     <!-- end col-3 --> 
 
     
 
     <!-- end col-3 --> 
 
    </div> 
 
    <!-- end row --> 
 
    </div> 
 
    <!-- end container --> 
 
</section>

我希望它會幫助你div結構。

來源

2015-10-26 04:42:02

<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>[email protected]</dd> 
</dl> 
</div> 

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

我還沒有在你的CSS做任何修改。只是修改了更改爲col-m至col-md-3的部分中的欄目。請隨時詢問是否有任何澄清。

來源

2015-10-26 05:21:40 user5469923

中心對齊部分

回答

相關問題