css - 如何在 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;
}