Вертикальное выравнивание не соответствует метке

Question

Я пытаюсь создать элементы списка. Список содержит заголовок, метку, описание. когда я размещаю надпись над заголовком рядом с заголовком, а не вертикально по центру текста заголовка. Текст заголовка может содержать 1 строку или две строки.

JsFiddle

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:

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

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: 0 5px; 
    display:inline-block; 
    vertical-align: top; 
    margin-left: 5px; 
} 

.meta { 
    color: grey; 
} 

Updated demo

Answer 2

Попробуйте это:

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

Answer 3

Это происходит потому, что оба рассматриваемых элементов являются inline (.head устанавливается в display: inline-block; и .label - span, который по умолчанию равен display: inline;) и поэтому выравнивается по вертикали по умолчанию baseline.

Чтобы вертикально выровнять их по середине, добавить vertical-align: middle; в положение .head и .label.

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

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