вертикальное выравнивание текста в div

Тема в разделе "Веб-дизайн", создана пользователем JIEX, 18 авг 2011.

Модераторы: zek24
  1. JIEX

    JIEX Писатель

    Регистр.:
    9 июн 2011
    Сообщения:
    6
    Симпатии:
    0
    Здравствуйте, помогите сделать вот такое меню(желательно использовать ul li:(
    [​IMG]
    Я сделал вот такое, но он далеко не такое как нужно:
    [​IMG]
    Нужно что бы там где пункт меню в две строчки так и отображалось в две строчки. Как сделать такое для IE7? Все что нашел в гугле, ничего не помогло.
    Код:
                    <div id="down-menu">                   
                        <ul>
                            <li><a href="#">Меритель (СИТ)</a></li>
                            <li><a href="#">Лабораторное оборудование</a></li>
                            <li><a href="#">Разметка</a></li>
                            <li><a href="#">Оснастка</a></li>
                            <li><a href="#">Режущий инструмент</a></li>
                            <li><a href="#">Слесарный инструмент</a></li>
                            <li><a href="#">Пневмоинструмент</a></li>
                            <li><a href="#">Оборудование</a></li>
                        </ul>               
                    </div>
    
    Код:
    #down-menu{
        background: #eace15;
        height: 39px;
        border: 1px solid black;
    }
    #down-menu ul{
        width: 1000px;
        height: 39px;
        margin: 10px 0 0 30px;
    }
    #down-menu li{
        display: table-cell;
        vertical-align: middle;
        list-style: none;
    }
    #down-menu a{
        color: #000;
        text-decoration: none;
        font-family: Verdana,Arial,Helvetica,sans-serif;
        font-size: 12px;
    }
    
     
  2. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    <br> поставить, не?
    либо задать ширину для li чтоб длинное само переносилось
     
  3. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    PHP:
    #down-menu li{
        
    displaytable-cell;
        
    vertical-alignmiddle;
        list-
    stylenone;
        
    text-align:center;
        
    width:100px
    }
     
  4. JIEX

    JIEX Писатель

    Регистр.:
    9 июн 2011
    Сообщения:
    6
    Симпатии:
    0
    Дело в том, что display: table-cell; и vertical-align: middle; не поддерживаются в IE7, так что данный способ не подходит.
     
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    http://habrahabr.ru/blogs/css/73113/
     
  6. ndvkerch

    ndvkerch

    Регистр.:
    26 июн 2008
    Сообщения:
    277
    Симпатии:
    74
    Для ie7 можно сделать свой ксс через "иф ие7" и выравнивать посередине с помощью отступа от верха (паддинг или маргин что больше подойдет) но нужно будет добавить 2 класса для li с одной строчкой и 2 строчками. Както так ерез жопу но можно сделать но лучше объяснить заказчику что ну его **х
     
  7. HYDRA

    HYDRA Создатель

    Регистр.:
    22 июл 2011
    Сообщения:
    27
    Симпатии:
    1
    margin: пропиши сюда #down-menu li сколько нужно. потом вроде норм будет;
    пример: margin-left:20px; margin-right:20px;
    А кто знает если сюда <div id="down-menu"> прописать align="justify" он повлияет на li или нет?

    Добавлено через 1 минуту
    если повлияет, то надо #down-menu li ограничения в ширину поставить max-width и min-width
     
  8. dixi

    dixi

    Регистр.:
    15 июн 2011
    Сообщения:
    201
    Симпатии:
    54
    обычно выходят из положения line-height - ом, а вот по поводу 2 строчек, если только классы ставить другие там, где 2 строчки
     
  9. JIEX

    JIEX Писатель

    Регистр.:
    9 июн 2011
    Сообщения:
    6
    Симпатии:
    0
    Сделал вот так:
    [​IMG]
    Нужно вот так:
    [​IMG]
    Не знаю как сделать чтобы некоторые li были в две строчки, если назначить width для li то пропадает вертикальное выравнивание. Дать этим li класс тоже не желательно, поскольку этот шаблон потом будет интегрироваться в движок. Подскажите пожалуйста.
    PHP:
    HTML
                    
    <div id="down-menu">
                        <
    ul>
                            <
    li><a href="#">Меритель (СИТ)</a></li>
                            <
    li><a href="#">Лабораторное оборудование</a></li>
                            <
    li><a href="#">Разметка</a></li>
                            <
    li><a href="#">Оснастка</a></li>
                            <
    li><a href="#">Режущий инструмент</a></li>
                            <
    li><a href="#">Слесарный инструмент</a></li>
                            <
    li><a href="#">Пневмоинструмент</a></li>
                            <
    li><a href="#">Оборудование</a></li>
                        </
    ul>
                    </
    div><!-- #down-menu-->
    PHP:
    CSS
    #down-menu ul{
        
    border1px solid black;
        
    text-aligncenter;
        
    background#eace15;
        
    height38px;
    }
    #down-menu li{
        
    line-height5px;
        
    margin0 5px 0 0;
        
    displayinline;
    }
    #down-menu a{
        
    displaytable-cell;
        
    vertical-alignmiddle;
        
    height38px;
        
    text-decorationnone;
        
    color:#000;
        
    font12px Verdana,Arial,Helvetica,sans-serif;
    }
     
  10. МихалычЪ

    МихалычЪ Создатель

    Регистр.:
    1 сен 2009
    Сообщения:
    38
    Симпатии:
    7
    Можно использовать expression
    применить к li
    Код:
    padding-top:expression(([высота блока]-this.offsetHeight)<0?"0px":(([высота блока]-this.offsetHeight)/2)+"px");