css - 如何在不使用 margin hack 的情况下使 Logo 、标题和按钮对齐。

Question

我想要一个标题、一个 Logo 和一个按钮都在标题居中的位置对齐， Logo 向右偏移，按钮在右侧较小。

如果我修复边距，我可以将其整合在一起，但这是不可扩展的，因此不希望将其作为最终解决方案。有什么更好的方法来做到这一点？

我的代码在下面，我也把它贴在这里:http://codepen.io/blueduckyy/pen/RpKoMJ .

HTML:

  <div class="top-bar username-heading">
      <img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
      <h1>blueduckyy</h1>
      <a class="button user-edit-button" href="/users/edit">Edit</a>
  </div>

CSS:

.username-heading img {
  float: right;
  width: 100px;
  height: 100px;
  margin-left:-250px;
  margin-right:150px;
}

.username-heading h1 {
  position: relative;
  top: 18px;
  left: 10px;
  text-align: center;
  font-size: 3.5rem;
  font-weight: bold;
}

.username-heading {
  height: 120px;
  background: yellow;
}

.user-edit-button {
  float: right;
  padding: 5px 5px 5px 5px;
  margin-top: -20px;
  margin-bottom: 1px;

Answer 1

您可以将带有“position: absolute”的元素放在容器内:

.username-heading {
  vertical-align: top;
  position: static;
}
.username-heading img {
  position: absolute;
  right: 0;
  width: 100px;
  height: 100px;
}

.username-heading h1 {
  position: absolute;
  top: 18px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-size: 3.5rem;
  font-weight: bold;
  display: inline-block;
}

.username-heading {
  height: 120px;
  background: yellow;
}

.user-edit-button {
  position: absolute;
  right: 0;
  top: 120px;
  padding: 5px 5px 5px 5px;
  margin-top: -20px;
  margin-bottom: 1px;
}

请记住，“.username-heading”位置必须不是“static”。