Question

这是我的代码（请参阅小提琴here）：

<h2>Icecream<a href='#' class='btn pull-right'><i class='icon-star'></i> Follow</a></h2>

问题（如红色背景所示）是pull-right按钮太高。如何让按钮与h2处于同一高度？

Answer 1

我不完全确定你的意思，但是我把它添加到了css块中，如果有帮助的话，它会将按钮按下到H1的中心：

.pull-right {
    margin-top: 5px;
}

我建议您将h1和按钮分开放在div中。最好尽可能将元素的对齐分开。

Answer 2

.btn.pull-right {
    position:relative;
    top:5px;
}

Answer 3

如果您处于无法修改标记的情况，Flexbox可以执行此操作。我已经为所有应该能够执行此操作的浏览器添加了前缀（遵循2009规范的FF版本无法执行此操作，因为它们不会在文本周围插入匿名弹性项目框）。你可以随意为不能使用flexbox的浏览器保留浮动。

http://jsfiddle.net/deZet/31/

h2 {
  background-color: red;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

h2 a.btn.pull-right {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

http://caniuse.com/#search=flexbox

如果你愿意修改标记，使用table / table-cell也可以，但是你需要摆脱浮动。

http://jsfiddle.net/deZet/34/

h2 {
    background-color: red;
    display: table;
    width: 100%;
}

h2 .cell {
    display: table-cell;
    vertical-align: middle;
}

h2 .cell:last-child {
    text-align: right;
    line-height: 1;
}

<h2><span class="cell">Icecream</span> <span class="cell"><a href='#' class='btn'><i class='icon-star'></i> Follow</a></span></h2>

按钮太高了h2

3 个答案: