如何将div中的元素与附近的另一个元素居中？

Question

我需要将div中的元素居中，而附近还有另一个元素。当我使用文本对齐中心时，它会将元素放置得很近，但由于附近有另一个元素，因此它不会完全位于我想要的位置。我希望徽标元素在社交元素向右浮动时准确居中。

#header {
  width: 100%;
  height: auto;
  text-align: center;
  background-color: #ffffff;
}
#logo {
  width: 30%;
  margin: 10px auto;
  display: inline-block;
  text-align: center;
}
#logo img {
  width: 100%;
  height: auto;
  margin: auto;
}
#social {
  width: 15%;
  display: inline;
  float: right;
}
#social img {
  width: 25%;
  display: inline-block;
}

<div id="header">
  <div id="logo">
    <img src="images/final/logo2.png">
  </div>
  <div id="social">
    <img src="images/final/fb.png">
  </div>
</div>

Answer 1

请参阅此fiddle

为了使徽标div集中而不管div是否保持社交链接，你必须使徽标div绝对定位。

现在，要使绝对定位徽标div居中，您必须将left:0;right:0添加到CSS。

修订后的CSS如下

<强> CSS

#logo {
    width: 30%;
    margin: 10px auto;
    position: absolute;
    left: 0;
    right: 0;
}

Answer 2

尝试添加此内容：

 #logo {
   position: absolute;
   left: 0;
   right: 0;
   margin-left: auto;
   margin-right: auto;

}

或者如果#logo有宽度：100px;然后位置：绝对;左：50％; margin-left：-50px;

Answer 3

添加中心标记并从社交中删除float：right     

＆＃13;

＆＃13;

    #header {
      width: 100%;
      height: auto;
      text-align: center;
      background-color: #ffffff;
    }
    #logo {
      width: 30%;
      margin: 10px auto;
      display: inline-block;
      text-align: center;
    }
    #logo img {
      width: 100%;
      height: auto;
      margin: auto;
    }
    #social {
      width: 15%;
      display: inline;
    }
    #social img {
      width: 25%;
      display: inline-block;
    }

＆＃13;

    <div id="header">
    <center>     
    <div id="logo">
        <img src="images/final/logo2.png">
      </div>
      <div id="social">
        <img src="images/final/fb.png">
      </div>
    </center>     
    </div>

＆＃13;

＆＃13;

＆＃13;