Выравнивание нижнего текста или меню - PullRequest
Новая
       2

Выравнивание нижнего текста или меню

0 голосов
/ 26 августа 2010

У меня есть меню с прямоугольными прямоугольниками 90х50. Некоторые из них имеют однострочный текст, другие - многострочный

вопрос: Как ВЕРТИКАЛЬНО выровнять его по дну с чистым CSS, не взломайте, пожалуйста

Ответы [ 2 ]

1 голос
/ 26 августа 2010

Вертикальное выравнивание в CSS не так просто, как вы могли бы интуитивно ожидать. Пока простое свойство vertical-align: bottom работает только в ячейках таблицы. Вот отличный ресурс, который объясняет, как (не) выравнивать по вертикали в CSS: Понимание выравнивания по вертикали, или «Как (не) выравнивать содержимое по вертикали» .

В орехе: в реальных веб-браузерах работает: 

display: table-cell;
vertical-align: bottom;

Но, следовательно, не в MSIE. Вы хотите сделать родительский элемент относительным и обернуть текст в абсолютно позиционированный элемент, а затем поместить его вниз. Вот пример copy'n'paste'n'runnable. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <style>
            li {
                position: relative;
                width: 90px; 
                height: 50px; 
                border: 1px solid black;
            }
            li span {
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><span>text</span></li>
            <li><span>text<br>multiline</span></li>
            <li><span>text</span></li>
        </ul>
    </body>
</html>
0 голосов
/ 26 августа 2010

Я думаю, что свойство vertical-align делает то, что вы хотите. В противном случае, возможно, вы сможете прояснить проблему?

Редактировать: Вы можете принудительно использовать поведение, подобное ячейке таблицы, для любого другого элемента, используя свойство display со значением 'table-cell' Я не совсем уверен, хорошо ли это работает со свойством vertical-align, но, возможно, вы можете использовать его. Если я правильно помню, потребовался дополнительный промежуточный элемент.

...