H1:后牌排列不正确

Question

我试图在此页上的h1之后添加一个徽章:http://69.175.87.138/~plnew/portfolio-item/verde-rosa/不幸的是，它没有与h1对齐。我尝试了很多事情来让它正确显示:负边距，不同的display:值，不同的line-height s等。好像什么都不起作用，所以我想在这里问一下。

h1 {
    font-size: 55px;
    line-height: 35px;
    font-weight: 300;
    color: #595959;
    margin-bottom: 15px;
    font-family: "lust-display",sans-serif;
}
h1::after {
    display: inline;
    margin-left: 10px;
    font-size: 14px;
    font-family:"freight-sans-pro", lato, sans-serif;
    background-color: #C9B39E;
    color: #FFF;
    border-radius: 5px;
    padding: 5px;
    content:"Marble";
}

<h1 class="entry-title">Verde Rosa</h1>

JSFiddle

Answer 1

尝试将vertical-align: middle添加到:after伪元素

h1 {
  font-size: 55px;
  line-height: 35px;
  font-weight: 300;
  color: #595959;
  margin-bottom: 15px;
  font-family: "lust-display", sans-serif;
}
h1::after {
  display: inline;
  margin-left: 10px;
  font-size: 14px;
  font-family: "freight-sans-pro", lato, sans-serif;
  background-color: #C9B39E;
  color: #FFF;
  border-radius: 5px;
  padding: 5px;
  content: "Marble";
  vertical-align: middle;
}

<h1 class="entry-title">Verde Rosa</h1>

Answer 2

不确定这是否是您正在寻找的基于简短的描述，但您尝试过垂直对齐吗?

h1::after {
  display: inline;
  margin-left: 10px;
  font-size: 14px;
  font-family: "freight-sans-pro", lato, sans-serif;
  background-color: #C9B39E;
  color: #FFF;
  border-radius: 5px;
  padding: 5px;
  content: "Marble";
  vertical-align: middle;
}