相关疑难解决方法(0)

我有一个div有两个图像和一个h1.所有这些都需要在div内垂直对齐,彼此相邻.

其中一个图像需要absolute放在div中.

在所有常见浏览器上工作所需的CSS是什么？

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

我一直在试着像垂直方向那样在文字表格中进行,但到目前为止我只能做到这一点 ......我不满意因为它是一个旋转的盒子...... Isn'有没有办法让实际的垂直方向文字？

我只在演示中将旋转设置为305度,这不会使文本垂直.270deg但我只是制作演示以显示旋转.

我在div中有一个简单的文本,如下所示;

<div id="banner">
    <div>This is an example text</div>
</div>

我希望div内的文字旋转20-30度.我已经在stackoverflow上找到了关于它的这个主题,它在Firefox和Chrome中给出了我想要的结果,但在IE7,IE8和IE9中没有.我也试过jquery旋转,但是当使用它时,看起来插件正在用div本身做一些事情,使它消失,而不是旋转div内的文本.这有可能与javscript和/或CSS？

注意:Cufon也在使用中.

Codlers回答后更新:

这是Codler回答后的当前应用的css.适用于FF和Chrome.

-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/

更新2:IE7和IE8现在正在旋转文本,但在IE9中,我的旋转文本后面有一个大的黑色方块.是什么导致这个？CSS现在如下;

-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);  
transform: rotate(-20deg);
background-color:transparent;

/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;

position:absolute;

padding     : 45px 10px 15px 10px;

最终的工作代码.对于Jeff和Codler来说,这是对此的肯定.

HTML:

<div …

有没有人知道如何用CSS只在IE7,IE8,IE9和IE10中成功实现垂直文本？(通过垂直文本,我指的是文本逆时针旋转90度)

这是我今天实施的,我认为应该是正确的:

.counterclockwise-text {

/* Chrome/Safari */
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;

/* Firefox */
-moz-transform: rotate(-90deg);
-moz-transform-origin: 50% 50%;

/* IE9 */
-ms-transform: rotate(-90deg);
-ms-transform-origin: 50% 50%;

/* This should work for IE10 and other modern browsers that do not need vendor prefixes */
transform: rotate(-90deg);
transform-origin: 50% 50%;

/* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */
zoom: 1\9;
writing-mode: tb-rl\9;
filter: flipv fliph;

}

但是,IE10并没有忽略"\ 9"CSS黑客攻击 - …

我正在尝试在跨越几行的瘦表格单元格中旋转一些文本跨浏览器.我希望它是一个很好的紧凑的行总结,这就是为什么它很薄并旋转-90度.这里描述的提示:

HTML表格中的垂直(旋转)文本

工作就像一个魅力,除了惊喜,IE,文本旋转,但文本被剪裁到单元格的宽度.

以下是相关款式:

#schedmenu td.label {
/*width:22px;*/
/*width:100%*/
vertical-align:middle;
font-size:12.5px;
}


#schedmenu td.label span {
display:block;
-moz-transform: rotate(-90deg);  /* FF3.5+ */
  -o-transform: rotate(-90deg);  /* Opera 10.5 */
 -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
          zoom: 1;

color:white;
position:relative;
top:12px;
}

和HTML:

<td class="label" rowspan="3"><span>Recent</span></td> 

如果你能让我超越这一个你将成为我的英雄:)

我希望通过<br />使用jQuery在字符之间添加标签来垂直对齐文本.

<div id="foo"><label>Vertical Text</label></div> 

看起来像这样:

V
e
r
t
i
c
a
l

T
e
x
t

我一直在搜索和玩弄转换:css的rotate()几个小时,但未能得到我想要的结果.我检查这些链接1,2,3等等.

其他的标题我不能使它与其他单元格一起使用,当使用空格时,列的宽度会扩展:no-wrap,没有它,文本文件将一个接一个地垂直向上.下面的图片应该清楚地解释我打算做什么.

这就是我所拥有的:

		table {
			border: 1px solid #000;
			border-collapse: collapse;
		}

		table td {
			border: 1px solid #000;
		}

		.rotate {
			white-space:nowrap;
		    -webkit-transform: rotate(-90deg);
		    -webkit-transform-origin: 10px;
		    -moz-transform: rotate(-90deg);
		    -moz-transform-origin: 10px;
		    -ms-transform: rotate(-90deg);
		    -ms-transform-origin: 10px;
		    -o-transform: rotate(-90deg);
		    -o-transform-origin: 10px;
		    transform: rotate(-90deg);
		    transform-origin: 10px;
		}

  <table>
        <tr>
            <td colspan="2">HEADER</td>
            <td>HEADER</td>
        </tr>
        <tr>
            <td rowspan="4" class="rotate">QUITE LONG TEXT</td>
            <td rowspan="2" class="rotate">TEST 1</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
        <tr>
            <td rowspan="2" class="rotate">TEST 2</td>
            <td>TEXT</td>
        </tr>
        <tr>
            <td>TEXT</td> …

我想这样做 这个 ，但我不能够做到这一点。

我知道如何旋转文本：

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

但我不知道如何让它在单元格的中心对齐。

你可以帮帮我吗？