- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我已经设置了一个 demo有 5 个 float <div>
带有不同长度的旋转文本。我想知道是否有一种 CSS 类可以处理所有文本的居中而不管长度如何。目前,我必须为样式表中的每个字符长度创建一个类。这可能会变得太乱了。我还注意到偏移量被搞砸了,因为我增加或减少了包装的大小 <div>
.
我将通过 jQuery 将这些类添加到 div,但我仍然必须设置每个类以实现跨浏览器兼容性。
.transform3 {
-webkit-transform-origin: 65% 100%;
-moz-transform-origin: 65% 100%;
-ms-transform-origin: 65% 100%;
-o-transform-origin: 65% 100%;
transform-origin: 65% 100%;
}
.transform4 {
-webkit-transform-origin: 70% 110%;
-moz-transform-origin: 70% 110%;
-ms-transform-origin: 70% 110%;
-o-transform-origin: 70% 110%;
transform-origin: 70% 110%;
}
.transform5 {
-webkit-transform-origin: 80% 120%;
-moz-transform-origin: 80% 120%;
-ms-transform-origin: 80% 120%;
-o-transform-origin: 80% 120%;
transform-origin: 80% 120%;
}
.transform6 {
-webkit-transform-origin: 85% 136%;
-moz-transform-origin: 85% 136%;
-ms-transform-origin: 85% 136%;
-o-transform-origin: 85% 136%;
transform-origin: 85% 136%;
}
.transform7 {
-webkit-transform-origin: 90% 150%;
-moz-transform-origin: 90% 150%;
-ms-transform-origin: 90% 150%;
-o-transform-origin: 90% 150%;
transform-origin: 90% 150%;
}
注意:我设置的偏移值是有眼球的。
虽然我希望使用样式表来处理这个问题,但我相信我必须在 JavaScript 中计算 CSS 的转换。
我创建了以下 demo演示动态转换。在此演示中,用户可以调整 font-size
的 .v_text
类并且只要文本的长度不超过.v_text_wrapper
高度,文本应垂直居中对齐,但请注意,我必须调整 magicOffset
值(value)。
好吧,我刚刚注意到这在 iOS 中不起作用...
谢谢@Dinesh Kumar DJ
最佳答案
给你:http://codepen.io/teodragovic/pen/fgekh
#output1,
#output2{
margin: 50px;
display: inline-block;
}
.rotate {
//remove this line if using js
transform: translateY(150px) rotate(-90deg);
}
.v_text_wrapper {
float: left;
width: 100px;
height: 150px;
background: #AAA;
border: solid #222 1px;
padding: 0;
margin: 0;
position: relative;
}
#output2 .v_text_wrapper {
height: 170px;
}
.v_text {
color: #444;
font-family: monospace;
font-weight: bold;
font-size: 1em;
width: 150px; //remove this line if using js
height: 100px;
transform-origin: top left;
text-align: center;
position: absolute;
display: table;
}
p {
display: table-cell;
vertical-align: middle;
}
不需要JS和动态偏移。您可以设置所有 <div>
包含与 wrapper 具有相同宽度和高度的文本,围绕左上角(可以是任何 Angular )旋转它们,然后使用 translateY 将它们定位回 wrapper 内(这假设 wrapper 尺寸始终相同且已知值)。
我添加了额外的 <p>
文本周围的元素并使用此方法进行垂直居中: http://css-tricks.com/vertically-center-multi-lined-text/
编辑: 我更新了 case wrapper 中的笔 <div>
改变大小。自 <div>
的旋转,它们的宽度变为高度,反之亦然,因此如果包装器的尺寸为 100x150,则子级必须为 150x100。
$('.v_text_wrapper').each(function(){
var x = $(this).css("height");
var text = $(this).children('.v_text');
text.css({"transform":"translateY("+x+") rotate(-90deg)", "width":x});
});
关于javascript - CSS 转换偏移量随文本长度而变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19470192/
我的一个 friend 在一次求职面试中被要求编写一个程序来测量可用 RAM 的数量。预期的答案是以二进制搜索方式使用 malloc():分配越来越大的内存部分,直到收到失败消息,减少部分大小,然后对
我正在通过任务管理器检查 Chrome 中特定选项卡的内存消耗情况。它显示了我使用的 RAM 量相当大: 但是,当我在开发人员工具中拍摄堆快照时,其显示的大小要小几倍: 怎么会这样呢? 最佳答案 并非
是否有一种可移植的方式,可以在各种支持的操作系统上同时在 .Net 和 Mono 上运行,让程序知道它运行的机器上有多少 RAM(即物理内存而不是虚拟内存)可用? 上下文是一个程序,其内存要求是“请尽
有谁知道是否有办法查看 android studio 项目中的所有 View 、LinearLayout、TextView 等? 我正在使用 android 设备监视器中的层次结构查看器使用 xml
很简单,我想从 Python 脚本中运行外部命令/程序,完成后我还想知道它消耗了多少 CPU 时间。 困难模式:并行运行多个命令不会导致 CPU 消耗结果不准确。 最佳答案 在 UNIX 上: (a)
我需要在给定数组索引和范围的情况下,在返回新索引的数组中向前循环 X 量并向后循环 X 量。 如果循环向前到达数组的末尾,它将在数组的开头继续。如果循环在向后时到达开头,它会在数组末尾继续。 例如,数
Android 应用程序中是否有类似最大 Activity 的内容?我想知道,因为我正在考虑创建具有铃声功能的声音应用程序。它将有大约 40 个 Activity 。但只有 1 个会持续运行。那太多了
有什么方法可以限制这种演示文稿的 curl 量吗?我知道系统会根据我们以 taht 方式模态呈现的 viewcontroller View 内的内容自动 curl 。 但 thta 在我的 iPad
我正在编写一个 Java 应用程序,它需要检查系统中可用的最大 RAM 量(不是 VM 可用的 RAM)。有没有可移植的方式来做到这一点? 非常感谢:-) 最佳答案 JMX 您可以访问 java.la
我发现它使用了 600 MB 的 RAM,甚至超过了 Visual Studio(当它达到 400 MB 的 RAM 时我将其关闭)。 最佳答案 dart 编辑器基于 Eclipse,而 Eclips
这个问题已经有答案了: Java get available memory (10 个回答) 已关闭 7 年前。 假设我有一个专门运行一个程序的 JVM,我如何获得分配给 JVM 的 RAM 量? 假
我刚刚使用 Eclipse 编写了一个程序,该程序需要很长时间才能执行。它花费的时间甚至更长,因为它只将我的 CPU 加载到 25%(我假设这是因为我使用的是四核,而程序只使用一个核心)。有没有办法让
我编写了一个 2x2x2 魔方求解器,它使用广度优先搜索算法求解用户输入的立方体位置。该程序确实解决了立方体。然而,当我进入一个很难解决的问题时,我会在搜索的深处发现这个问题,我用完了堆空间。我的电脑
我正在尝试同步运行多个 fio 线程,但随着线程数量的增加,我的计算机内存不足。似乎每个 fio 线程占用大约 200MB 的 RAM。话虽这么说,有没有办法让每个线程都有一个固定的最大内存使用量?设
我使用“fitctree”函数(链接:https://de.mathworks.com/help/stats/classificationtree-class.html)在 Matlab 中开发了一个
我有一个 .NET 进程,由于我不会深入探讨的原因,它消耗了大量 RAM。我想要做的是对该进程可以使用的 RAM 量实现上限。有办法做到这一点吗? 我找到的最接近的是 Process.GetCurre
您可能已经看到许多“系统信息”应用程序,它们显示诸如剩余电池生命周期之类的信息,甚至显示内存等系统信息。 以类似的方式,是否有任何方法可以从我的应用中检索当前可用 RAM 量,以便我可以更好地决定何时
我从来都不是 MFC 的忠实粉丝,但这并不是重点。我读到微软将在 2010 年发布新版本的 MFC,这让我感到很奇怪 - 我以为 MFC 已经死了(不是恶意,我真的这样做了)。 MFC 是否用于新开发
我在一台安装了 8 GB 内存的机器上工作,我试图以编程方式确定机器中安装了多少内存。我已经尝试使用 sysctlbyname() 来获取安装的内存量,但它似乎仅限于返回带符号的 32 位整数。 ui
基本上,我想要一个由大小相同的 div(例如 100x100)和类似 200x100 的变体构建的页面。它们都 float :向左调整以相应地调整窗口大小。问题是,我不知道如何让它们在那种情况下居中,
我是一名优秀的程序员,十分优秀!