Заставьте элементы заполнять одно и то же пространство строки с помощью шрифта разного размера

Я хотел бы, чтобы эти элементы заполняли одно и то же пространство строки с разными размерами шрифта. Как видите, первый элемент «устанавливает стандарт» для высоты строки. Все следующие элементы имеют пробелы над и под ними. Независимо от размера шрифта я хочу, чтобы все элементы заполняли одно и то же пространство (% 100 от высоты строки). Кто-нибудь знает? Спасибо!

    body{ 
        background-color: #ffffff;
        background-size: cover;
        border: 5px solid yellow;
        margin: 0px;
        padding: 0px;
    }
    
    .head1{
        text-align: center;
        display:inline-block;
        background-color: cornflowerblue;
        border: 5px solid black;
        padding: 0px;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    #par1{
        display: inline-block;
        background-color: aqua;
        border: 5px solid pink;
        margin: 0px;
    }
    
    #par2{
        display: inline-block;
        background-color: crimson;
        color: #ffffff;
        border: 5px solid green;
        margin: 0px;  
    }

<h1 class = "head1">Site title!</h1><p id = "par1"> Here is some text! Format all this with HTML.</p><h2 class = "head1">Header here.</h2><h2 class = "head1">Another header.</h2><p id = "par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

css text-size

10.09.2018 21:00

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

1 046

Ответы 2

Идея состоит в том, чтобы использовать flexbox и полагаться на эффект растяжения, но вы должны настроить выравнивание.

body {
  background-color: #ffffff;
  background-size: cover;
  border: 5px solid yellow;
  margin: 0px;
  padding: 0px;
  display:flex;
  flex-wrap:wrap;
}

.head1 {
  text-align: center;
  display: inline-flex;
  background-color: cornflowerblue;
  border: 5px solid black;
  padding: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#par1 {
  display: inline-flex;
  align-items:center;
  background-color: aqua;
  border: 5px solid pink;
  margin: 0px;
}

#par2 {
  display: inline-flex;
  align-items:center;
  background-color: crimson;
  color: #ffffff;
  border: 5px solid green;
  margin: 0px;
}

<h1 class = "head1">Site title!</h1>
<p id = "par1"> Here is some text! Format all this with HTML.</p>
<h2 class = "head1">Header here.</h2>
<h2 class = "head1">Another header.</h2>
<p id = "par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

Или отрегулируйте высоту строки для всех элементов до самого большого:

body {
  background-color: #ffffff;
  background-size: cover;
  border: 5px solid yellow;
  margin: 0px;
  padding: 0px;
  flex-wrap:wrap;
}

body > * {
  line-height:37px;
  vertical-align:bottom;
}

.head1 {
  text-align: center;
  display: inline-block;
  background-color: cornflowerblue;
  border: 5px solid black;
  padding: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#par1 {
  display: inline-block;
  align-items:center;
  background-color: aqua;
  border: 5px solid pink;
  margin: 0px;
}

#par2 {
  display: inline-block;
  align-items:center;
  background-color: crimson;
  color: #ffffff;
  border: 5px solid green;
  margin: 0px;
}

<h1 class = "head1">Site title!</h1><p id = "par1"> Here is some text! Format all this with HTML.</p><h2 class = "head1">Header here.</h2><h2 class = "head1">Another header.</h2><p id = "par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

Ах. Красивый. Спасибо! Мне нравится решение с гибкой пленкой. Но как бы вы выровняли текст?

— 10.09.2018 21:18

@ comp1201, как вы можете видеть, я также сделал элемент inline-flex, а внутри я использовал align-items ... так что просто настройте это значение, чтобы контролировать выравнивание

— 10.09.2018 21:20

10.09.2018 21:04

Вы можете установить одинаковую высоту строки для всех и установить выравнивание по центру по вертикали:

.head1, #par1,#par2{
  line-height:28px;
  vertical-align:center;
}

если по какой-то причине вы не можете этого сделать (необходимо обрабатывать шрифты неизвестного размера), вы можете поместить свои элементы в оболочку и использовать flexbox:

.head1, #par1,#par2{
  display: flex;
  align-items: center;

}
.wrap{
  display:flex;
  flex-wrap: wrap;
}

<div class = "wrap">

    <h1 class = "head1">Site title!</h1>
    <p id = "par1"> Here is some text! Format all this with HTML.</p>
    <h2 class = "head1">Header here.</h2>
    <h2 class = "head1">Another header.</h2>
    <p id = "par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

</div>

10.09.2018 21:12

Другие вопросы по теме

Как получить размер текста и размер шрифта в Java?

Автоматическое преобразование sp друг в друга в ldpi, mdpi, hdpi, xhdpi, xxhdpi

Большой размер текста Android рассчитывается неправильно

Как заблокировать android: textSize

Как получить размер выделенного текста (px) и толщину шрифта?

Как изменить размер шрифта кнопки флаттер-материала?

Как указать размер текста только для определенных размеров экрана и меньше?

Текст Xxhdpi в textView textSize

Размер текста уведомления по умолчанию

Установить размер текста с привязкой данных

Заставьте элементы заполнять одно и то же пространство строки с помощью шрифта разного размера

Ответы 2

Другие вопросы по теме

Похожие вопросы