0

这是我目前正在进行的设计： 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 的填充。

有人有想法么？谢谢

4

2 回答 2

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>
于 2013-11-13T14:44:03.710 回答
0

最好设置transform-origin为不会根据内容而改变的内容，例如left top.

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

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

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

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

于 2013-11-13T14:48:42.510 回答