Question

我有3个div（headcol1，headcol2和headcol3）浮动到左侧：

如何在不使用padding-left或margin-left的情况下将这3个元素置于中心位置？结果将如下所示：

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

Answer 1

这是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我设法找到了解决方案。

我使用display：inline-block但col1和col2下降了，我不明白为什么，但是我使用了vertical：align-top来放置它们。

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

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

Answer 3

此问题可能会对您有所帮助： How to center floating divs?

您发布的图片不起作用，但据我所知，您仍然需要某种填充或边距，以防止您的div彼此接触。您可以将此数字设为％，以便无论容器<div>大小如何，布局都会保持响应。

将一个3个浮动div的容器居中到左侧

3 个答案: