带有左，右和中心元素的标题

I am having trouble creating a header with left, right and centered elements - I keep trying but i am unable to get the elements positioned in that specific layout with the title being centered at all times

我在创建带有左，右和居中元素的标题时遇到问题 - 我一直在尝试，但我无法将元素定位在特定布局中，标题始终居中

Can anybody help? I feel that I am close but i can't get it to work!

有人可以帮忙吗？我觉得我很亲密，但我无法上班！

CODE HERE: https://jsfiddle.net/4a25nqb4/

代码在这里：https：//jsfiddle.net/4a25nqb4/

HTML:

HTML：

<div class="container">
            <div class="top">
               <div id="social">
                    <span class="fa fa-facebook"></span>
                    <span class="fa fa-instagram"></span>
                    <span class="fa fa-youtube"></span>
               </div>
                <p id="website">www.AlmostFreeFurniture.com</p>

                <h1 id="title">Almost Free Furniture</h1>


            </div>



        </div>

CSS:

CSS：

* {
    margin:0 auto;
    padding:0px;
}

.top {
    height: 40px;
    background-color:black;
    color:red;
    margin-top:4px solid orange;
    margin-top:10px;
    display: table;
    width: 100%;
    text-align:center;
}

#social, #website, #title {
    display:inline-block;
    vertical-align: top;
}

#social {
    float:right;
}

#website {
    float:left;
}

#title {
    text-align: center;
}

3 个解决方案

#1

The floats effect the amount of available area to center in. Because the item on the left is larger then the right, the center between them is closer to the right. If you'll position the left and right items absolutely, the centering mechanism will ignore them (fiddle):

浮动影响可用区域的中心数量。因为左侧的项目比右侧的项目大，所以它们之间的中心更靠近右侧。如果您绝对放置左右物品，居中机制将忽略它们（小提琴）：

#social {
    position: absolute;
    right: 0;
}

#website {
    position: absolute;
    left: 0;
}

#2

I would use display: flex instead of display: table, and then you can push the #social over to the right with order:

我会使用display：flex而不是display：table，然后你可以按顺序将#social推到右边：

* {
    margin:0 auto;
    padding:0px;
}

.top {
    height: 40px;
    background-color:black;
    color:red;
    margin-top:4px solid orange;
    margin-top:10px;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    text-align:center;
}

#social, #website, #title {
    -webkit-flex: 1;
    flex: 1;
    vertical-align: top;
}
#website { overflow-x: hidden; }
#social {
    text-align: right;
    -webkit-order: 1;
    order: 1;
}
#title {
    text-align: center;
}

https://jsfiddle.net/4a25nqb4/

To give #title more room, you can either give it a flex: 2 or something like flex-basis: 50% or thereabouts.

为#title提供更多空间，你可以给它一个flex：2或类似flex-basis：50％左右。

#3

Set width of this elements to 33.33%

将这些元素的宽度设置为33.33％

#social, #website, #title {
  display:inline-block;
  vertical-align: top;
  width: 33.33%;
}

Next give text-align for elements left, center and right.

接下来给出左，中，右元素的文本对齐。

#1

#social {
    position: absolute;
    right: 0;
}

#website {
    position: absolute;
    left: 0;
}

#2