如何在CSS中向右推动第一个元素时定位第二个元素中心

Question

我是CSS的新手，我创建了一个调用目录，在左侧显示一个图标，旁边显示一个人的名字。在下一行，我正在打印他的电话号码。电话号码与中心对齐，但名称并非总是如此。

为了使其成为中心，我将所有内容都包含在div中

<div class="container thumbnails" id="all1" tabindex="5000" align="center">
</div>

我创建了一个jsfiddle：http://jsfiddle.net/rajeevgurram/LmU5a/

如果将该名称推向右边的小图标，我该如何将该人的姓名居中？

Answer 1

随着您了解更多，您会发现很少想要使用实际的img标签。在这种情况下，图像应该是它​​旁边元素的背景。通过这种方式，您可以将其放置在任何您想要的位置，而无需推动您的内容。当您更改它时，您可能希望使标记更具语义性（尽可能简单并由函数而不是样式定义）。我建议像：

HTML

<dl>
  <dt><a href="#">Name 1</a></dt>
  <dd>Description 1</dd>
  <dt><a href="#">Name 2</a></dt>
  <dd>Description 2</dd>
</dl>

CSS

dt {
  background: url('icon.png') no-repeat left center;
}