Как выравнивать текст по вертикали, равный вершине CSS

Question

Я пытаюсь выровнять текст по вертикали равным с помощью css, но в области правой части есть какое-то пространство.

Добавили код и ссылку на скрипку.

p{ 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: table; 
 
} 
 
span.blue{ 
 
    background: blue; 
 
} 
 
span.green{ 
 
    background: green; 
 
} 
 
span.black{ 
 
    background: black; 
 
} 
 
span.circle{ 
 
     width: 15px; 
 
    height: 15px; 
 
    -webkit-border-radius: 15px; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    margin-right: 12px; 
 
    /* float: left; */ 
 
    vertical-align: top; 
 
} 
 
span.desc{ 
 
     /* float: left; */ 
 
    width: 115px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <p> 
 
    <span class="blue circle"></span> 
 
    <span class="desc">Blue text</span> 
 
    </p> 
 
    
 
    <p> 
 
    <span class="green circle"></span> 
 
    <span class="desc">Green text</span> 
 
    </p> 
 
    
 
    <p> 
 
    <span class="black circle"></span> 
 
    <span class="desc">black text</span> 
 
    </p> 
 

 
</div>

Fiddle Link

Answer 1

Использование vertical-align: middle или вы можете использовать те же line-height и font-size решить вопрос, как в приведенном ниже фрагменте кода.

p span { 
    font-size: 16px; 
    line-height: 16px; 
} 

Объяснение:

Придерживаясь line-height и font-size гарантирует, что vertical-align: top будет работать прекрасно.

фрагмент кода ниже:

p{ 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: table; 
 
} 
 
span.blue{ 
 
    background: blue; 
 
} 
 
span.green{ 
 
    background: green; 
 
} 
 
span.black{ 
 
    background: black; 
 
} 
 
span.circle{ 
 
     width: 15px; 
 
    height: 15px; 
 
    -webkit-border-radius: 15px; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    margin-right: 12px; 
 
    /* float: left; */ 
 
    vertical-align: top; 
 
} 
 
span.desc{ 
 
     /* float: left; */ 
 
    width: 115px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
} 
 
p span { 
 
    font-size: 16px; 
 
    line-height: 16px; 
 
}

<div class="container"> 
 
    <p> 
 
    <span class="blue circle"></span> 
 
    <span class="desc">Blue text</span> 
 
    </p> 
 
    
 
    <p> 
 
    <span class="green circle"></span> 
 
    <span class="desc">Green text</span> 
 
    </p> 
 
    
 
    <p> 
 
    <span class="black circle"></span> 
 
    <span class="desc">black text</span> 
 
    </p> 
 

 
</div>

Answer 2

Используйте следующее решение:

p{ 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
    display:block; 
 
} 
 
span.blue{ 
 
    background: blue; 
 
} 
 
span.green{ 
 
    background: green; 
 
} 
 
span.black{ 
 
    background: black; 
 
} 
 
span.circle{ 
 
    display:inline-block; 
 
    width: 15px; 
 
    height: 15px; 
 
    -webkit-border-radius: 15px; 
 
    border-radius: 15px; 
 
    vertical-align:middle; 
 
} 
 
span.desc{ 
 
    display:inline-block; 
 
    width: 115px; 
 
    vertical-align:middle; 
 
}

<div class="container"> 
 
    <p> 
 
    <span class="blue circle"></span> 
 
    <span class="desc">Blue text</span> 
 
    </p> 
 
    <p> 
 
    <span class="green circle"></span> 
 
    <span class="desc">Green text</span> 
 
    </p> 
 
    <p> 
 
    <span class="black circle"></span> 
 
    <span class="desc">black text</span> 
 
    </p> 
 
</div>

Answer 3

Я думаю, что я вижу небольшой мили вы говорите. Это лучше ? Я выровнен как cirlce и текст, используя

vertical-align: middle; 

вместо

vertical-align: top; 

Редактировать

Как vertical-align: top должен быть сохранен, вместо этого я добавил margin-top: 2px к кругам. Это помещает их на ту же высоту, что и текст, и оба они по-прежнему выровнены сверху.

p{ 
 
    clear: both; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: table; 
 
} 
 
span.blue{ 
 
    background: blue; 
 
} 
 
span.green{ 
 
    background: green; 
 
} 
 
span.black{ 
 
    background: black; 
 
} 
 
span.circle{ 
 
    width: 15px; 
 
    height: 15px; 
 
    -webkit-border-radius: 15px; 
 
    border-radius: 15px; 
 
    display: inline-block; 
 
    margin-right: 12px; 
 
    /* float: left; */ 
 
    vertical-align: top; 
 
    margin-top: 2px; 
 
} 
 
span.desc{ 
 
     /* float: left; */ 
 
    width: 115px; 
 
    vertical-align: top; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <p> 
 
    <span class="blue circle"></span> 
 
    <span class="desc">Blue text</span> 
 
    </p> 
 
    
 
    <p> 
 
    <span class="green circle"></span> 
 
    <span class="desc">Green text</span> 
 
    </p> 
 
    
 
    <p> 
 
    <span class="black circle"></span> 
 
    <span class="desc">black text</span> 
 
    </p> 
 

 
</div>

Answer 4

Ваш вопрос выглядит, что высота текста больше, то, что окружности. Flexbox может помочь в этом, сделать p-дисплей гибким и установить круги для выравнивания центра.

p{ 
    clear: both; 
    margin: 0; 
    padding: 0; 
    display: flex; 
} 
span.blue{ 
    background: blue; 
} 
span.green{ 
    background: green; 
} 
span.black{ 
    background: black; 
} 
span.circle{ 
    align-self:center; 
     width: 15px; 
    height: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    display: inline-block; 
    margin-right: 12px; 
    /* float: left; */ 
    vertical-align: top; 
} 
span.desc{ 
     /* float: left; */ 
    width: 115px; 
    vertical-align: top; 
    display: inline-block; 
}