Question

这是我目前正在进行的设计：http://alpha.bounde.co.uk

你可以看到每个功能区框的标题都是垂直文本（关于，工作，联系），我试图找到最好的方法来定位它们，这样我就可以有任何长度的文本和它将出现在左侧。此时较长的文本在从中心旋转时出现在右侧。我希望它自动完成而不只是计算宽度的原因是我使用谷歌字体（目前已关闭），如果字体未加载，则文本字符串将比以前更长/更短，它将再次失去位置。

h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 30px;
    color: #793F26;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin: 0;
    padding: 0 10px;
    position: absolute;
    left: -60px;
    top: 100px;
    background: #fdfdfd;
    display: block;
}

这是我用于H2的样式，并且HTML中没有什么特别的，只是容器div中的H2，其边框为30px，填充为20px。

谁有任何想法？感谢

Answer 1

我将你的标题放在一个较大的容器元素中，该元素以左边框为中心，并将标题置于其中心。

http://jsfiddle.net/isherwood/sqh95/

body {
    padding: 20px;
}
.heading-wrapper {
    position: absolute;
    width: 150px;
    margin-left: -100px;
    text-align: center;
}
h2 {
    position: relative;
    left: 0;
    top: 50px;
    white-space: nowrap;
}

<div class="heading-wrapper">
    <h2>Contact</h2>
</div>

Answer 2

最好将transform-origin设置为基于内容不会更改的内容，例如left top。

然后，您可以使用translateX(-100%)来“移动”您的内容，以便绕着（固定的）右上角进行旋转。这比单独围绕（可变）右上角旋转更容易使用。

所以你的结果会是这样的：

transform-origin:left top;
transform:translate(X,Y) rotate(-90deg) translateX(-100%);

将translate(X,Y)替换为所需的移动以使元素位于左侧的位置 - 最好这样做而不是使用left和top，因为这样看起来可以接受在不支持转换的浏览器中。

垂直文本的稳健定位

2 个答案: