问题标签 [vertical-text]

我有以下 HTML：

div.outer是一个狭窄的垂直条。div.inner旋转了 90 度。我想要文本“居中？” 在其容器 div 中居中显示。我事先不知道任何一个 div 的大小。

这很接近：http: //jsfiddle.net/CCMyf/2/。您可以从 jsfiddle 中看到，在transform: rotate(-90deg)应用样式之前，文本垂直居中，但在应用样式之后有些偏移。div.outer这在短时尤其明显。

是否可以在不事先知道任何大小的情况下垂直居中此文本？我还没有找到transform-origin解决这个问题的任何值。

我正在尝试使用 d3 让文本在 svg 中垂直显示。但是，我不想旋转它：我希望字母保持水平，但一个在另一个之上。设置writing-mode=tb似乎没有做任何事情。这是我尝试过的：

文本显示在正确的位置，使用正确的字体等，但它是水平的。

我不记得我在哪里看到或读过它，但显然有一个快捷方式可以将用逗号分隔甚至没有逗号的单词水平列表转换为垂直列表，让我可以快速构建一个带有 LI 标签的 UL垂直列表。

我只需要使用常用句子制作垂直列表的快捷方式，我有一个 Windows 8 操作系统。

大家下午好，我已经编写了一个脚本来计算图像的宽度和高度，并在图像的右下角正确放置一串文本，以便与字幕/字幕一起使用。

我已经设法让它在除 IE8 之外的所有浏览器中完美地生成、计算和显示。出于某种原因，它在 IE8 中炸毁了屏幕，我似乎无法弄清楚它为什么这样做并改进我的 JavaScript 以在使用 IE8 时可能具有用于计算的条件函数。

有什么建议吗？

http://jsfiddle.net/jodriscoll/u26vZ/

我正在更改 SlickGrid 标题的高度并使用以下 CSS 旋转标题中的文本：

为了更好地理解，请看一下：

http://jsfiddle.net/2Nvc3/1/

标题中的旋转文本居中并被截断。如何更改对齐方式，使其从底部开始（文本应在 -90° 旋转之前左对齐）？

其中一列的宽度是故意不同的。

我想在单击按钮时垂直对齐 div 中的文本。

我正在使用 php 和 jquery 框架库。

这就是我想问的：

例如：“myname is xyz”（正常对齐）

垂直对齐

请指导。

有谁知道如何仅使用 CSS 在 IE7、IE8、IE9 和 IE10 中成功实现垂直文本？（通过垂直文本，我指的是逆时针旋转 90 度的文本）

这是我今天实现的，我认为应该是正确的：

然而，IE10 并没有忽略 "\9" CSS hack——它会拾取这些值并将文本再旋转 90 度。一个有用的解决方案是一种在 IE8 及以下不会被 IE10 拾取的垂直文本的方法。我真的想避免使用仅限 IE8 的样式表，或者使用媒体查询来检测 IE10。我只是在寻找一种方法来修改上面的 CSS 以在所有浏览器中都有垂直文本。谢谢！

编辑：

对于它的价值，我还尝试了下面的代码，它使用过滤器来旋转文本。这可能适用于大多数情况，但在我的例子中，很多文本被包装元素的受限（非旋转？）约束切断。

在 IE10 和 IE8 都满意的情况下，我仍然没有找到使用纯 CSS 的方法。

我正在根据宿舍房间号（4 位数）绘制住户人数。房间号应该是字符串。但是当我使用 as.character(RmNum) 时，轴仍然显示为数字。

我希望宿舍号码在轴上垂直显示。有人可以帮我吗？

我正在开发一个菜单系统，该系统由 div（宽度：275px，高度：75px，边框：1px 实心）组成。我希望整个 div 都是可点击的，我使用 a 标签和 display:block 属性（参见下面的代码）。一些菜单项是多行文本，但我无法垂直对齐它们。基本代码是：

我尝试了以下方法：

1. line-height: 75px: 这不适用于多行文本
2. display: table and vertical-align: middle 不适用于 -tag 的 100% 宽度和高度。

我真的用包装器 div、表格等尝试了很多其他代码，但没有成功。否则，我不想使用 javascript (onclick="location.href")。

谢谢！

当谈到 CSS 时，我不是专家，我只想在可能的情况下使用 CSS 创建网页布局。我想要的布局是有两个 div，一个包含横幅，另一个包含页面内容，横幅位于内容的左侧。到目前为止很容易。横幅 div 包含两个子 div，一个包含页面的标题，另一个包含一些额外的信息，例如联系信息。再一次，不是太难。

当我希望标题中显示的文本是垂直的，从下到上阅读时，就会出现问题。我在网上进行了一些搜索，发现 CSS3 变换旋转功能可以满足我的要求。

不幸的是，在浏览器中渲染文本时，浏览器为旋转文本保留的空间是横幅文本旋转前的宽度，而不是旋转后文本的宽度（即旋转前的横幅文字）。因此，当我希望它位于横幅 div 旁边时，我的内容 div 就在页面上。

要了解我的意思，请查看此JSFiddle。

如何让两个 div 并排生活？

这不一定是纯 CSS 解决方案，因为我认为我可能必须使用 JavaScript/jQuery 来计算宽度和高度等，然后相应地移动横幅 div，但纯 CSS 解决方案会很漂亮。