如何最好地使用config属性在矩形内定位文本？ [英] How can I best use a config property to position text within a rectangle?

问题描述

我正在构建一个Web部件，我在其中显示横幅图像并在矩形内部叠加文本。在每个图像的属性中，我希望允许最终用户在图像的边界矩形内指定文本的垂直和水平方向。也就是说，对于图像1，文本是水平居中的，垂直位于顶部。这提供了八个组合方向。



这就要求使用基于表格的布局，因为在表格单元格中，您可以直接指定这些属性，因为我描述它们，整个布局将是一个表格单元格，没有其他任何事情可以担心会受到基于表格布局的恶劣影响。



表或不，我还需要让设计师能够与我的意图保持一致，所以她将创建一组类，每个布局组合一个，但使用八个几乎相同的类似乎有点多余。我确实使用表格布局，我们可以将文本方向保留在预定义的样式之外，我只需使用jQuery设置每次加载新图片时文本的垂直和水平方向。



欢迎所有关于如何最小化代码和css的建议。

I am building a web part where I display a banner images and overlaid text inside a rectangle. In the properties for each image I want to allow the end user to specify the vertical and horizontal orientation of the text within the bounding rectangle of the image. That is, "for image 1, text is horizontally centred and vertically at the top. This gives eight combined orientations.

This cries out for using table based layout, because in a table cell you can directly specify these properties as I describe them, and the entire layout will be one table cell, with nothing else to worry about falling under the evil influence of table based layout.

Table or not, I also need to enable the designer to align with my intentions, so she will create a set of classes, one per layout combo, but using eight nearly identical classes seems a bit redundant. If I do use table layout, we can leave the text orientation out of the predefined styling and I simply use jQuery to set the vertical and horizontal orientation for the text each time I load a new picture.

All suggestions on how to minimise code and css for this are welcome.

推荐答案

如果我不得不这样做我会创建CSS规则，如（左，中，右）和（上，中，下）...这样你只需要6条规则而不是8条！

在这条规则中我会定位一个图像和一个div（带有文本），两者都包含在另一个div中，我所做的只是将正确的规则分配给封闭的div

If I had to to such a thing I would create CSS rules like (Left, Center, Right) and (Top, Middle, Bottom)...This way you need only 6 rules and not 8!
In this rules I would position an image and a div (with the text), both enclosed in an other div and all I have done is assign the right rule to the enclosing div

<div class="L T">
  <image alt="" src="" />
  <div>[text]</div>
</div>

现在 - 您可以从服务器端加载这些规则名称，或者通过单个jQuery方法设置...不超过一行半......

Now - you can load those rule names from the server side or set by a single jQuery method...Of no more than one and a half line...

这篇关于如何最好地使用config属性在矩形内定位文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！