vertical-alignment - famo.us 中没有文本垂直对齐属性吗？

Question

看起来在所有 famo.us 示例中，他们都使用一个非常大的 lineHeight 属性将表面上的文本垂直对齐到中间，而他们使用 textAlign: "center" 将其水平对齐。如果没有垂直对齐，这似乎是有问题的，因为如果我想要一段文本，行高技巧会把它搞砸。

谢谢!

Answer 1

这应该是一个比实际情况更简单的问题，但由于真实尺寸表面的问题，您可能需要为此解决一个问题。

问题是真实尺寸的曲面无法向修改器报告其高度，以便正确计算给定原点的位置。您必须设置表面的实际高度才能实现真正的居中。

在此示例中，表面根据内容的大小在整个上下文中居中。我对 Surface 进行了子类化，以便我可以重新定义以目标元素作为参数的部署。然后，我设置 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);