Question

我正在尝试在此页面上的h1之后添加徽章：public partial class Page2: System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (page1 button1 is clicked) //this is what I need help with { //run sql... } else if (page1 button2 is clicked) //this will be similar to the first { //run sql... } } }不幸的是它没有与h1对齐。我已经尝试了很多东西来让它正确显示：负边距，不同的http://69.175.87.138/~plnew/portfolio-item/verde-rosa/值，不同的display:等等。似乎没有什么工作，所以我想我会问这里。

line-height

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";
}

JSFiddle

Answer 1

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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;
}

h1：徽章没有正确排队

2 个答案: