Question

我正在尝试创建一个列表项。该列表包含标题，标签，描述。当我在标题旁边放置草稿标签时，它不会垂直居中于标题文本。标题文本可能带有1行或2行。

HTML

<div class="container">
        <a href="" class="head">Hedline Text</a>
        <span class="label">Draft</span>
        <div class="meta">
            1246 Everett Avenue. Louisville. Kentucky. 40204. US
        </div>
        <p class="description">
            It is a long established fact that a reader will be distracted by the 
    readable content of a page when looking at its layout. The point 
    of using Lorem Ipsum is that it has a more-or-less making it look 
    like readable English.
        </p>
    </div>

的CSS：

.container { 
    padding: 50px;
    width: 400px;
    margin: 0 auto;
    font-family: arial;
    font-size: 13px;
    line-height: 20px;
}

.head {
    font-size: 20px;
    line-height: 24px;
    display: inline-block;
    text-decoration: none;
}

.label {
    background: #eee;
    line-height: 24px;
    font-size: 12px;
    padding: 6px 5px;
}

Answer 1

试试这个：

HTML：

public static class EntityDataSourceExtensions
{
    public static TEntity GetEntityAs<TEntity>(this object dataItem)
        where TEntity : class
    {
        var entity = dataItem as TEntity;


        if (entity != null)
            return entity;


        var td = dataItem as ICustomTypeDescriptor;


        if (td != null)
            return (TEntity)td.GetPropertyOwner(null);


        return null;
    }


    public static Object GetEntity(this object dataItem)
    {
        var td = dataItem as ICustomTypeDescriptor;


        if (td != null)
            return td.GetPropertyOwner(null);


        return null;
    }
}

CSS：

<div class="container">
    <a href="" class="head">Hedline Text Hedline Hedline Text Hedline Hedline Text Hedline<span class="label">Draft</span></a>
    <div class="meta">
        1246 Everett Avenue. Louisville. Kentucky. 40204. US
    </div>
    <p class="description">
        It is a long established fact that a reader will be distracted by the 
readable content of a page when looking at its layout. The point 
of using Lorem Ipsum is that it has a more-or-less making it look 
like readable English.
    </p>
</div>

Updated demo

Answer 2

之所以发生这种情况是因为有问题的两个元素都是inline（.head设置为display: inline-block;而.label是span，默认为{ {1}}）因此垂直对齐默认display: inline;。

要将它们垂直对齐，请将baseline添加到vertical-align: middle;和.head。

＆＃13;

.label

＆＃13;

.container {
  padding: 50px;
  width: 400px;
  margin: 0 auto;
  font-family: arial;
  font-size: 13px;
  line-height: 20px;
}
.head {
  font-size: 20px;
  line-height: 24px;
  display: inline-block;
  text-decoration: none;
  vertical-align: middle;
}
.label {
  background: #eee;
  line-height: 24px;
  font-size: 12px;
  padding: 6px 5px;
  vertical-align: middle;
}
.meta {
  color: grey;
}

＆＃13;

Answer 3

试试这个：

.label{
 Padding-top: -5 px;
 }

垂直对齐不适合标签

3 个答案: