不能因为社交媒体图标而使标题居中？

Question

我已经在html的右侧放置了社交媒体图标，但我无法再将标题居中，如何解决此问题？

我已经试过text-align: center了，但它不起作用。

#socialm{
  float:right;
}
#socialm ul li{display: inline;}

<header>
  <div id="socialm">
    <a href="https://www.facebook.com" target="_blank"><img src="facebook.png" width= "45px" height="45px"/></a>
    <a href="https://www.instagram.com" target="_blank"><img src="instragram.png" width= "45px" height="45px"/></a>
    <a href="https://www.youtube.com/channel/..." target="_blank"><img src="youtube.png" width= "45px" height="45px"/></a>
  </div>
  <h1>Photography and visual arts</h1>
</header>

Answer 1

如果不绝对定位其中一个元素，就无法做到这一点。

绝对定位将元素从流中移除，因此它忽略了周围的其他元素。

在这里，我将"social"div放在右边，而不是浮动。正如你所看到的，标题现在居中了。

你也可以看到定位的缺点。。如果不小心定尺寸，就会出现重叠。媒体查询可以解决这个问题。

#socialm {
  position: absolute;
  right: 0;
}
#socialm ul li {
  display: inline;
}
header {
  text-align: center;
}

<header>
  <div id="socialm">
    <a href="https://www.facebook.com" target="_blank">
      <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
    </a>
    <a href="https://www.instagram.com" target="_blank">
      <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
    </a>
    <a href="https://www.youtube.com/channel/..." target="_blank">
      <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
    </a>
  </div>
  <h1>Photography and visual arts</h1>
</header>

JSFiddle演示

Answer 2

我不确定这是否是您想要的，但我只是将text-align:center;添加到您的h1标记中。

以下是解决方案：http://codepen.io/Glenvig/pen/dMeaQm