将行高设置为相对于父元素的百分比 [英] Set line-height as a percentage relative to the parent element

问题描述

我有一个响应元素，其宽度和高度都将缩放。

I have a responsive element where it's width and height will both scale. Inside this I have some text which I want to center vertically.

如何设置文本 line-height

line-height：100％是相对于字体的常规高度，所以这不帮助...

line-height: 100% is relative to the font's regular height so this doesn't help...

推荐答案

。我之前遇到过这种技术。基本上它使用一个伪元素和vertical-align：middle。

Here's another way to center an element vertically. I came across this technique some time ago. Basically it uses a pseudo element and vertical-align: middle.

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

这篇关于将行高设置为相对于父元素的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！