Надежное позиционирование для вертикального текста

Question

Надежное позиционирование для вертикального текста

0

Это дизайн, над которым я сейчас работаю: http://alpha.bounde.co.uk

так как вы можете видеть, что каждый из ленточных ящиков имеет заголовок окна как вертикальный текст (о, работа, контакт), и я пытаюсь найти лучший способ разместить их, чтобы я мог иметь любой текст любой длины, и он появится вниз по левой стороне. На данный момент длинный текст отображается справа, когда он поворачивается из его центра. Причина, по которой я хочу, чтобы это было сделано автоматически, а не просто вычислить ширину, я использую шрифты Google (которые в настоящее время отключены), и если шрифт не загружен, тогда текстовая строка будет длиннее/короче, чем раньше, и она снова будет выпадают из положения.

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, только H2 внутри контейнера div, который имеет границу 30px и дополнение 20px.

у кого есть идеи? благодаря

rbyrne 13 нояб. 2013, в 16:21

Источник

Теги:

html

css

positioning

2 ответа

0

Лучше всего установить transform-origin на что-то, что не меняется в зависимости от содержимого, например, left top.

Затем вы можете использовать translateX(-100%) для "переноса" вашего контента, чтобы вы поворачивались вокруг (фиксированного) верхнего правого угла. С этим легче работать, чем пытаться вращаться вокруг (изменяемого) верхнего правого угла.

Таким образом, ваш результат будет примерно таким:

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

Замените translate(X,Y) на требуемое движение, чтобы получить элемент в позиции вниз с левой стороны - лучше сделать это, чем использовать left и top, потому что тогда он будет выглядеть приемлемым в браузерах, которые не поддерживают преобразования.

Niet the Dark Absol 13 нояб. 2013, в 11:56

Ещё вопросы

isherwood · Accepted Answer · 2013-11-13T12-18-00.000Z

Я бы поставил ваши заголовки в более крупный контейнерный элемент, который был сосредоточен на левой границе, и центрировал заголовки внутри него.

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>

Похоже, решение Данко может быть лучше, если предположить, что оно работает.
Это было самое надежное решение для меня. Затем я поместил в h2 промежуток, чтобы граница была динамичной в зависимости от длины текста. большое спасибо.