Попытка выровнять текст по вертикали - PullRequest
Новая
       6

Попытка выровнять текст по вертикали

0 голосов
/ 01 октября 2010

Макет, который я пытаюсь достичь, показан на следующем рисунке: alt text

HTML ниже является одной из многих попыток, которые не сработали. Проект, для которого он предназначен, нацелен на HTML5 только в последних браузерах, поэтому ему не нужно работать ни с чем, кроме последних версий Chrome, Safari, Firefox и (с последующим ветром) IE9 beta. 

<!DOCTYPE html>
<html>
<body>
    <div style="border: solid 1px red; width:600px; height: 600px">
        <span style="-webkit-transform:rotate(-

90deg);display:block;position:absolute;bottom:600px">My Vertical Text</span>
        <img src="http://www.gizmodo.com/assets/resources/2007/01/Bill-gates-mugshot.jpg"  

style="position:absolute;bottom:600px" />
    </div>
</body>
</html>

1 Ответ

3 голосов
/ 01 октября 2010

Полагаю, вам может понадобиться что-то вроде этого: http://jsfiddle.net/aNscn/3/

bottom: 600px ни к чему вас не приведет - это просто приведет к удалению элементов на 600 пикселей от нижней части экрана пользователя.Вместо этого присвойте внешнему div a position: relative и позвольте двум элементам выровняться по его низу с достаточно низким значением bottom.Также проверьте свойство transform-origin, чтобы получить правильное положение span после поворота.

#outer {
    border: solid 1px red;
    width:600px;
    height: 600px;
    position: relative;
}

#text {
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: left top;
    -o-transform: rotate(-90deg);
    -o-transform-origin: left top;
    transform: rotate(-90deg);
    transform-origin: left top;
    position: absolute;
    bottom: 0;
    left: 5px;
}

#img {
    position:absolute;
    bottom: 15px;
    left: 30px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...