定心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向左

回答

相关问题