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

I need to center an element within a div while there is another element nearby. When I use text-align center, it places the element close but it's not going exactly where I'd like due to another element nearby. I want the logo element to center exactly while the social element floats to the right.

我需要在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>

3 个解决方案

#1

See this fiddle

To make the logo div centralize irrespective of the div taht holds the social link, you'll have to make the logo div absolute positioned.

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

Now, to make the absolute positioned logo div centered, you'll have to add left:0;right:0 to the CSS.

现在，要使绝对定位的徽标div居中，您必须添加左：0;右：0到CSS。

The revised CSS is as follows

修订后的CSS如下

CSS

CSS

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

#2

Try add this:

尝试添加此：

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

}

}

alternatively if #logo would have width: 100px; then position: absolute; left: 50%; margin-left: -50px;

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

#3

Add center tag and remove float:right from social

添加中心标记并从社交中移除浮动：

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

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