Question

可能重复：
css vertical centering

我正在尝试将文字置于屏幕一侧的垂直标签中。到目前为止，我有the following CSS and HTML：

CSS

body
{
    font-family: Arial;
}
.panel
{
    position:absolute;
    top: 0px;
    bottom: 0px;
    left: -300px;
    width: 299px;
    border-right: 1px solid black;
}

.tab
{
    position: absolute;
    top: 10px;
    width: 16px;
    right: -16px;
    height: 75px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    cursor: default;
}

.tab div 
{
    position: relative;
    display: block;
    left: 1px;
    width: 75px;
    height: 15px;
    font-size: 14px;
    font-weight:normal;
    line-height: 15px;
    text-align: center;
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

HTML

<div class="panel">
    <div id="pnlStack" class="tab"><div>Name</div></div>
</div>

IE8中的一切看起来都很棒，但在我尝试过的所有其他浏览器中（FF，Opera，Chrome）文本都没有在选项卡中居中。我该如何解决这个问题呢？

Answer 1

您需要确保单词div的左下角与面板的左上角对齐。请参阅http://jsfiddle.net/8gU8z/4/我添加了top: -15px等于div的高度。

要定位IE并“反向”这个，请使用条件注释的css，如http://jsfiddle.net/8gU8z/9/，尽管可能在您的IE样式表中（如果有的话）。

Answer 2

很难理解你是在谈论轮换还是在谈论大号
我
ķ
Ë
这个？

无论如何..因为你有IE工作，如果谈论轮换你可以添加这个到你的css让它旋转90度

p.sometext {
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
}

此外..这里有一些关于这个主题的很好的资源：

希望这有助于：）

CSS垂直文本

2 个答案: