Vertical alignment famo.us中是否没有文本垂直对齐属性?

Vertical alignment famo.us中是否没有文本垂直对齐属性?,vertical-alignment,famo.us,Vertical Alignment,Famo.us,看起来,在所有著名的.us示例中,他们使用非常大的lineHeight属性将曲面上的文本垂直对齐到中间,而使用textAlign:“center”将其水平对齐。如果没有垂直对齐,这似乎有问题,因为如果我想要一段文字,行距技巧会把它搞糟 谢谢 这应该是一个比实际问题更简单的问题,但由于真实尺寸曲面存在问题,您可能需要为这一问题找到解决方法 问题在于,真实大小的曲面无法向修改器报告其高度,以便正确计算给定原点处的位置。必须设置曲面的实际高度才能实现真正的居中 在本例中,曲面根据内容的大小在整个上下文

看起来,在所有著名的.us示例中,他们使用非常大的
lineHeight
属性将曲面上的文本垂直对齐到中间,而使用
textAlign:“center”
将其水平对齐。如果没有垂直对齐,这似乎有问题,因为如果我想要一段文字,行距技巧会把它搞糟


谢谢

这应该是一个比实际问题更简单的问题,但由于真实尺寸曲面存在问题,您可能需要为这一问题找到解决方法

问题在于,真实大小的曲面无法向修改器报告其高度,以便正确计算给定原点处的位置。必须设置曲面的实际高度才能实现真正的居中

在本例中,曲面根据内容的大小在整个上下文中居中。我对该表面进行了子类化,以便可以重新定义deploy,它将目标元素作为参数。然后,我设置surface.state的大小,以便它能够使用其原点使元素居中

这些类型的问题将很快得到解决,但现在必须进行黑客攻击

这是一个例子。。祝你好运

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');

function MySurface(options) {
    Surface.apply(this, arguments);
    this._superDeploy = Surface.prototype.deploy
}

MySurface.prototype = Object.create(Surface.prototype);
MySurface.prototype.constructor = MySurface;

MySurface.prototype.deploy = function deploy(target) {
  this._superDeploy(target);
  var size    = this.getSize();
  var width   = size[0] == true ? target.offsetWidth  : size[0] ;
  var height  = size[1] == true ? target.offsetHeight : size[1] ;
  this.state.setSize([width,height]);
};


var context = Engine.createContext();

var lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var surface = new MySurface({
  size: [200,true],
  content: lorem,
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: 'green'
  }
});

surface.state = new StateModifier({origin:[0.5,0.5]});

context.add(surface.state).add(surface);

我不完全明白这是怎么回事。您在哪里设置
中间的垂直文本对齐方式?这是不是因为您将原点设置为
[0.5,0.5]
?如果是这样的话,这会不会影响其他方面,比如曲面旋转时的行为等。?也就是说,如果我想将文本居中,但它仍围绕左上角旋转,该怎么办?非常感谢。是的,它会影响该修改器下的其他元素。[0.5,0.5]修饰符仅用于文本。。看看我的例子,在最后一行。。假设我将surface.state和surface添加到视图或RenderNode而不是上下文。该新视图或RenderNode可以使用其自己的旋转修改器附加到上下文。