html - CSS:如何在跨度内对齐图像旁边的文本？

Question

我使用以下 HTML 代码创建了一个由图像和文本组成的 span。我正在尝试使用以下 CSS 类将该文本与图像对齐:

span.my-profile {
  background-image: url('http://placehold.it/450x100/fc6');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 16px; /* Or size of icon + spacing */
  text-align: center;
}

<span class="my-profile">My Full Name</span>

然而，这并没有像预期的那样工作。并且文本仍然像图像一样向左对齐。那么我的代码有什么问题呢？以及如何将文本居中对齐？

提前致谢。

Answer 1

将背景图像添加到与文本相同的跨度只会将图像作为带文本的跨度的背景。尝试使用 <img /> 将图像作为单独的元素放置在跨度中。标签。然后，您可以在 css 中使用 display:inline-block 或 float 来控制图像和文本。