屏幕左下角的文字答案

【问题标题】：text on bottom left corner of screen屏幕左下角的文字
【发布时间】：2015-09-28 03:42:48
【问题描述】：

我想将我的门户名称保持在浏览器窗口左下角的垂直方向。

以下是我正在使用的 css 样式，但文本在左边有一个边距，并且一些文本也被剪裁了。

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        font-size:60px;
        position: fixed;
        left: 0;
        bottom: 0;
    }

请有人帮忙纠正我的 css 课程。

这是JSFiddle 链接

谢谢。

拉克什曼。

【问题讨论】：

标签： css

【解决方案1】：

试试这个：

.rotate {
    transform-origin:0% bottom;
    -moz-transform-origin:0% bottom;
    -webkit-transform-origin:0% bottom;
    -o-transform-origin:0% bottom;
    -ms-transform-origin:0% bottom;
    transform:rotate(-90deg) translateY(100%);
    -moz-transform:rotate(-90deg) translateY(100%);
    -webkit-transform:rotate(-90deg) translateY(100%);
    -o-transform:rotate(-90deg) translateY(100%);
    -ms-transform:rotate(-90deg) translateY(100%);
	display: block;
	writing-mode: tb-rl;
	position: fixed;
    left:0; bottom:0;
	margin: auto;
    font-size:60px;
    background-color:lightblue;
}

<div class="rotate">
    LeftBottom
</div>

~~如果你更改font-size，那么也要更改height 和line-height。您也可以添加padding，但是您不需要更改height 和line-height（仅当font-size 更改时）。~~

fiddle example 已更改为 font-size (~~height, line-height~~) 和 padding（只是为了看看它是如何工作的）。

更新：我通过删除 height 和 line-height 进行了更改。这里和小提琴的例子。效果更好。

【讨论】：

【解决方案2】：

看看这个更新的jsfiddle，当你旋转文本时，它会从 div 的中间旋转，所以当它的 -90 度和屏幕底部的部分 div 将在窗口下方旋转。

.newRotate {
  -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size:70px;
    position: fixed;
    left: -100px;
    bottom: 110px;
}

为了缓解这个问题，我改变了左侧和底部的位置

【讨论】：

【解决方案3】：

你可以试试这个，看看是不是你要找的。p>

.rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size:60px;
    position: fixed;

    left: -80px;
    bottom: 90px;
}

【讨论】：