css - 在 div 中居中文本，同时忽略同一行上的图像宽度

Question

我想要的是在页脚中居中文本(版权)，并让我的社交媒体链接与右侧的文本位于同一行。但问题是，当我添加例如Facebook 图标在那里，文字不再居中。

我想要的:https://i.gyazo.com/cce548b5b19baff5165dfac3babff244.png

我现在拥有的:https://i.gyazo.com/14675784e748c676b3c8a01cfe97b304.png

那么我如何获得文本居中，忽略图像的宽度，使其真正到达中间，而不是图像后剩余页脚的中间。

Answer 1

给图像一个负边距，等于图像的宽度。

.nav {
  background: #00A2E8;
}
.text-center {
  text-align: center;
  padding: 10px;
}
.copright {
  line-height: 40px;
}
.side-image {
  float: right;
  margin-left: -40px;
}

<div class="nav text-center">
  <span class="copright">Copyright</span>
  <img src="http://www.emp3.ws/img.php?i=http://i1.sndcdn.com/artworks-000126500818-m9uyre-large.jpg" alt="rocket" height="40" width="40" class='side-image' />
</div>