定心3周浮動的div向左

容器我有3周的div（headcol1，headcol2和headcol3）向左浮動：定心3周浮動的div向左

如何居中這3個元件，而無需使用padding-left或margin-left在他們的容器？結果看起來如下：

<html> 
<div class="fivestar"> 
    <div class="row"> 
     <div class="headcol1"> 
      <p><span>FOLLOW US</span></p> 
      <p> 
       <a href="<?php $this->info(" fb_link ") ?>" target="_blank">F</a> 
       <a href="<?php $this->info(" tt_link ") ?>" target="_blank">G</a> 
       <a href="<?php $this->info(" yt_link ") ?>" target="_blank">L</a> 
       <a href="<?php $this->info(" yt_link ") ?>" target="_blank">I</a> 
       <a href="<?php $this->info(" yt_link ") ?>" target="_blank">X</a> 
      </p> 
     </div> 
     <div class="headcol2"> 
      <img src="public/images/common/starlogo.png"> 
     </div> 
     <div class="headcol3"> 
      <p><span>PHONE NO:</span></p> 
      <p class="nums"> 
       <?php $this->info(["phone"]);?> 
      </p> 
      <hr width="120px"> 
      <p class="nums"> 
       <?php $this->info(["phone"]);?> 
      </p> 
     </div> 
    </div> 
</div> 
<html> 

<style> 
    #header .fivestar { 
     margin: 0 auto; 
     padding-top: 15px; 
    } 

    #header .fivestar .headcol1 { 
     float: left; 
     border: 1px solid black; 
     width: auto; 
    } 

    #header .fivestar span { 
     font-family: 'myriad'; 
     font-size: 1em; 
     color: #F24033; 
    } 

    #header .fivestar .headcol1 p a { 
     font-family: 'socialicoregular'; 
     font- size: 2em; 
     color: #999999; 
     letter-spacing: 15px 
    } 

    #header .fivestar .headcol1 p a:hover { 
     color: #AC0000; 
    } 

    #header .fivestar .headcol2 { 
     float: left; 
     border: 1px solid black; 
     padding: 0px 80px 0px 80px; 
    } 

    #header .fivestar .headcol3 { 
     float: left; 
     border: 1px solid black; 
     width: auto; 
    } 

    #header .fivestar .headcol3 .nums { 
     font-family: 'RobotoSlab', serif; 
     color: #555555; 
     font-size: 1.250em; 
     font- weight: bold; 
     margin: 0px; 
     padding: 0px; 
    } 

    #header .fivestar .headcol3 hr { 
     margin: 0px; 
     padding: 0px; 
    } 
</style>

來源

2017-05-30 Charlese Virility

請幫助後。謝謝:) –

請添加您的代碼。如果可能的話也是一個演示。我們無法幫助您處理您提供的信息。 –

下面的例子：

.container { 
 
    width: 300px; /* for demo purpose */ 
 
    text-align: center; 
 
    background-color: green; 
 
} 
 
.element { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color:red; 
 
    border: thin solid black; 
 
    display: inline-block; 
 
}

<div class='container'> 
 
<div class='element'></div> 
 
<div class='element'></div> 
 
<div class='element'></div> 
 
</div>

來源

2017-05-30 11:02:47 Gerard

你忘了元素漂浮在左邊。使用margin：0 auto：對於一個容器來說可以做到這一點。 –

但我認爲保證金是不允許的:)也許只有保證金 - 左eh – Gerard

他意味着他不想使用像margin-left：300px;或填充 - 左：300px; 'margin：0 auto;'會自動生效，也不會只有一個屏幕尺寸。 –

-1

這個問題可以幫助你：How to center floating divs?

您發佈的圖片無法正常工作，但據我所知，您仍然需要使用某種填充或邊距以防止div彼此接觸。您可以將此數字設爲％，以便佈局保持快速響應，而不管容器大小如何<div>。

來源

2017-05-30 11:03:48 April

一位同事告訴我將col1漂浮在左邊，col3漂浮在右邊，並使用position：absolute作爲中心的圖像;我還沒有嘗試過他所推薦的內容，但如果沒有其他方法可以做到這一點，這將是我的最終解決方案。 –

我設法找到了我自己的解決方案。

我用display：inline-block，但是col1和col2下降了，我不明白爲什麼，但是我用vertical：align-top來放它們。

前 https://i.stack.imgur.com/9CVzo.jpg

https://i.stack.imgur.com/AdMHK.jpg

來源

2017-06-01 05:15:21

定心3周浮動的div向左

回答

相關問題