Як вертикально вирівняти елементи <li> в <ul>?

96

У мене горизонталь, <ul>і мені потрібно відцентрувати кожну <li>в ній вертикально. Моя розмітка нижче. Кожен <li>має межу, і мені потрібно, щоб елементи, а також їх вміст знаходилися посередині вертикально. Будь ласка, допоможіть; Я новачок у CSS.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar li
        {
            border: solid 1px black;
            display: block;
            float: left;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar li.button
        {
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

css

— аконсу
джерело

w3schools.com/css/css_navbar.asp - я знаю, що на це відповіли, але на той випадок, якщо хтось дивиться на це відтепер, я знайшов це корисним

— JabbaWook

75

Я припускаю, що, оскільки ви використовуєте декларацію XML, ви не турбуєтесь про IE або старіші браузери.

Тож ви можете використовувати display:table-cellі display:table-rowподобатись так:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>

— Річард JP JP Le Guen
джерело

1

дякую, це частково працює. тобто вміст задніх коробок відцентрований, але як мені відцентрувати самі коробки?

— akonsu

ні, ні, середина списку. у цьому конкретному прикладі останнє поле має бути нижчим за перші три.

— akonsu

@akonsu - я змінив його, хоча не тестував ні на чому, окрім FireFox. Повідомте мене, якщо це підходить.

— Richard JP Le Guen,

1

Річард, велике спасибі за вашу допомогу. я не знав про ці типи дисплея. на жаль, вони не підтримуються в IE7. я знайшов спосіб вирівняти вміст кожного <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html, але, схоже, не існує перехресного способу вирівнювання <li> всередині <ul>. ..

— akonsu

1

Якщо ви націлюєтесь на IE7, чому у вас є <?xml?>декларація? Усі версії IE насправді не підтримують XHTML. Я думаю, вам може знадобитися прочитати Надсилання XHTML як текст / html, що вважається шкідливим: hixie.ch/advocacy/xhtml

— Річард JP Le Guen

75

Ось хороший:

Встановити line-heightрівним тому, що heightє; працює як шарм!

Наприклад:

li {
    height: 30px;
    line-height: 30px;
}

— пробігати
джерело

1

Чи можете ви розповісти на невеликому прикладі?

— Лі

1

Ідеально - висота лінії: 30 пікселів; на плаваючому <li> було те, що мені потрібно (Chrome)

— GuruBob

1

Що станеться, якщо він складається в два рядки?

— Махеш,

1

Так, життєздатний лише з не більше одного рядка тексту.

— Wanny Miarelli

1

Це єдине, що в мене спрацювало. Інші відповіді не спрацювали.

— adev

34

Для цього ви можете використовувати flexbox.

ul {
    display: flex;
    align-items: center;
}

Детальне пояснення щодо використання flexbox можна знайти тут .

— діммех
джерело

4

У мене була така ж проблема. Спробуйте це.

<nav>
    <ul>
        <li><a href="#">AnaSayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

@charset "utf-8";

nav {
    background-color: #9900CC;
    height: 80px;
    width: 400px;
}

ul {
    list-style: none;
    float: right;
    margin: 0;
}

li {
    float: left;
    width: 100px;
    line-height: 80px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
}

nav li a {
    width: 100px;
    text-decoration: none;
    color: #FFFFFF;
}

— ГесапАдам
джерело