Question

我有这个：

.class {
  height:10px; 
  padding:2px; 
  box-sizing:border-box;
}

.class .subclass {
  height:100%; 
  line-height:???;
}

正如您所看到的，class具有固定的高度，但subclass具有相对百分比高度。此高度尽管值为100%，但不等于父级的高度，因为它受父级padding属性的影响。我需要的是将line-height属性设置为等于height属性，以便垂直居中。

问题： 如何使用LESS获取当前类（我们设置line-height属性的类）高度？

我知道我可以设置变量然后以这种方式进行计算：

@class-height:10px;
@class-padding:2px;
@subclass-height:calc(@class-height - @class-padding * 2); //*2 because of Top & bottom padding

.class {
  height:@class-height; 
  padding:@class-padding; 
  box-sizing:border-box;
}

.class .subclass {
  height:@subclass-height; 
  line-height:@subclass-height;
}

但我想知道是否有一种简单的方法可以在没有计算和固定变量设置的情况下实现这一目标。

Answer 1

如果父高是固定数，您可以使用绝对定位。

.parent{
  height: 100px; 
  background-color: tomato; 
  width: 100%; 
}

.child{
  position: relative; 
  left: 0; 
  right: 0; 
  margin: 0 auto; 
  top: 50%; 
  transform: translateY(-50%);
  text-align: center; 
}

另一个选择是利用table的vertical-align属性，这样你就可以像这样编写你的css了。

.parent{
  height: 100px; 
  background-color: tomato; 
  width: 100%; 
  display: table;
  text-align: center; 
}

.child{
  display: table-cell;
  margin: 0 auto; 
  text-align: center; 
  vertical-align: middle; 
}

CSS Less - 获取当前类的高度属性

1 个答案: