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

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

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

在这里，我将'社交'div放在右边而不是浮动它。如您所见，标题现在居中。

你也可以看到定位的缺点。没有仔细的尺寸，你会得到重叠。媒体查询可以解决这个问题。

line == '2 hello world'

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

JSFiddle Demo

Answer 2

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

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

由于社交媒体图标，无法居中冠军？

2 个答案: