Когда я вчера делал заметки, я увидел вопрос интервью,Как добиться горизонтального и вертикального центрирования,Хоть у меня и немного на душе,но увидев несколько ответов,решил проверить сам.В начале были небольшие проблемы в проверке,а потом как в осиное гнездо ковыряться,и всякие сомнения пришло мне в голову.И я хотел еще раз разобраться,после долгого метания я наконец зафиксировал проблему наline-heightа такжеvertical-alignтело.
Все должны использовать его сейчасflexМакет, но после всех метаний на некоторое время, все равно записывайте свои успехи, ха-ха
1. Сомнительный код
<div class="container">
<div class="box">我要水平垂直居中</div>
</div>
.container{
border: 2px solid black;
background-color: chartreuse;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.box{
display: inline-block;
line-height: normal;
font-size: 1rem;
vertical-align: middle;
background-color: cornflowerblue;
}
Не говорите, это действительно посередине:
2. Некоторые очки знаний
2.1 Горизонтальное и вертикальное выравнивание
Некоторые сомнения на самом деле просто мое собственное невежество, хахаха
-
text-alignРаботает не только с текстом, но также со встроенными элементами и встроенными блочными элементами, устанавливая горизонтальное выравнивание. -
vertical-alignТолько блочные элементы и функция строки строки внутреннего элемента задают вертикальное выравнивание элементов.
2.2 line-height
Это тоже смешно, я правline-heightТакое впечатление, что когда элементheightравныйline-height, текст внутри элемента центрируется по вертикали. Но когда я вчера проверил данные, я обнаружил, что было много сложных вопросов.
Просто учитесь со мной, как сказал MDN выше,line-heightМожет использоваться для интервала многострочного текста или высоты однострочного текста и т. д.
Посмотрите здесь, вы можете взглянуть на две справочные статьи ниже и сделать следующие выводы:
- Если для элемента не задана высота, высота элемента
line-heightВысота этого свойства наследуется. Он также поставляется со значением по умолчанию, поэтому, когда вы устанавливаете элемент без установленной высотыline-height:0;, он рухнет, даже если в нем есть текст. - Можно разделить на несколько видов ящиков, когда вы устанавливаете
line-height, встроенная рамка не изменится, что изменится, так это межстрочный интервал, который определяется толькоfont-sizeрешение. На самом деле это элемент вышеheightравныйline-heightПричина, по которой текст внутри элемента центрирован по вертикали. - стоимость
numberчас,line-heightдляnumberумножается на текущий элементfont-size,Выбиратьnormalобычно когдаnumber1,2
3. Возникает сомнение
Мне нравится разбирать восток и запад, и я обнаружил, что код выше закомментированvertical-align: middle;Эффект не изменился, он по-прежнему центрирован по вертикали, но измените его наvertical-align: top;Это также работало следующим образом:
4. Решить
Правда, я не понимала, почему произошла эта странная ситуация до того, как написала блог, но вдохновилась, когда написала, получилось вот так хахаха
На самом деле, давайте добавим немного текста, чтобы он был многострочным, и эффект получится без комментирования.vertical-align: middleЭффект следующий:
Закомментировано, вот как это выглядит, не по центру по вертикали:
Таким образом, приведенное выше просто совпадение, потому что это одна строка текста, сбалансируйте верхний и нижний интервалы, это не следует называть межстрочным интервалом, это должно быть ради баланса, чтобы иметь эффект вертикального центрирования!
После долгого метания, кажется, решилась бесполезная маленькая ошибка! Ха-ха-ха-ха. Когда я искал информацию, я везде видел "Мир CSS" Учителя Чжан Синьсюй.После пыток я сразу же сделал заказ, надеюсь сам посмотрю, не покупайте его даром хахаха.
Ссылаться на:
Действительно понимать высоту строки, высоту и высоту строки в CSS
высота строки в учебных заметках css
\