行高和div的动态高度

5 浏览
0 Comments

行高和div的动态高度

我想知道如何将行高(line-height)设置为容器div的高度，以便将元素垂直居中在容器高度的中间。

假设我有以下代码：

如何设置行高，使其随容器div的高度变化而改变？

谢谢
uksz

0

2 答案

0 Comments

问题：Line-height and dynamic height of div的出现原因和解决方法

在设置div的行高和动态高度时，直觉上可能会将line-height设置为100%，但实际上这只会将行高设置为字体的100%大小。

假设您可能想要居中文本，可以尝试以下解决方法：

首先，给div容器设置position:relative;

然后，给文本设置类名.center，并对其进行如下样式设置：

.center {
    position:absolute;
    top:0; 
    left:0; 
    bottom:0; 
    right:0;
    margin: auto;
    /* 如果想水平左对齐，可以尝试使用 "margin: auto auto auto 0" */
}

通过以上解决方法，可以实现div文本的居中显示。

0
0 Comments

线高和div的动态高度问题的原因是，在同一行上放置了另一个高度等于容器高度的内联级元素。通常在这里使用display:inline-block;，但任何适用于高度的内联级元素，如inline-table、inline-flex或替换的内联元素都可以正常工作。

解决方法如下所示：

html, body { height: 900px; }
div { border:1px solid black; height: 12%; }
div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }



My text

以上是解决线高和div的动态高度问题的方法。

0