Làm cách nào để căn chỉnh theo chiều dọc các phần tử <li> trong <ul>?

96

Tôi có một chiều ngang <ul>và tôi cần căn giữa mỗi <li>thứ theo chiều dọc. Đánh dấu của tôi ở bên dưới. Mỗi cái đều <li>có một đường viền và tôi cần các mục cũng như nội dung của chúng ở giữa theo chiều dọc. Xin vui lòng giúp đỡ; Tôi mới làm quen với 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

— akonsu
nguồn

w3schools.com/css/css_navbar.asp - tôi biết điều này đã được trả lời nhưng trong trường hợp có ai nhìn vào điều này từ bây giờ trở đi, tôi thấy điều này hữu ích

— JabbaWook

75

Tôi giả sử rằng vì bạn đang sử dụng khai báo XML, bạn không phải lo lắng về IE hoặc các trình duyệt cũ hơn.

Vì vậy, bạn có thể sử dụng display:table-cellvà display:table-rowthích như vậy:

<?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>

— Richard JP Le Guen
nguồn

1

cảm ơn bạn, điều này một phần hoạt động. nghĩa là, nội dung của các hộp phía sau được căn giữa, nhưng làm cách nào để căn giữa các hộp?

— akonsu

không, không, giữa danh sách. trong ví dụ cụ thể này, ô cuối cùng phải thấp hơn ba ô đầu tiên.

— akonsu

@akonsu - Tôi đã thay đổi nó, mặc dù tôi không thử nghiệm nó trên bất kỳ thứ gì khác ngoài FireFox. Hãy cho tôi biết nếu nó phù hợp.

— Richard JP Le Guen

1

Richard, cảm ơn rất nhiều vì sự giúp đỡ của bạn. tôi không biết về các loại màn hình này. tiếc là chúng không được hỗ trợ trong IE7. tôi đã tìm ra cách để căn chỉnh nội dung của từng <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html nhưng dường như không có cách trình duyệt chéo nào để căn chỉnh <li> bên trong <ul>. ..

— akonsu

1

Nếu bạn đang nhắm mục tiêu IE7, tại sao bạn lại có một <?xml?>khai báo? Tất cả các phiên bản của IE không thực sự phổ biến XHTML. Tôi nghĩ rằng bạn có thể cần phải đọc Gửi XHTML dưới dạng text / html coi là có hại: hixie.ch/advocacy/xhtml

— Richard JP Le Guen

74

Đây là một cái hay:

Đặt line-heightbằng bất kỳ cái gì heightlà; hoạt động như một sự quyến rũ!

Ví dụ:

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

— lội nước
nguồn

1

Bạn có thể giải thích bằng một ví dụ nhỏ?

— Leigh

1

Hoàn hảo - line-height: 30px; trên nổi <li> 's là những gì tôi cần thiết (Chrome)

— GuruBob

1

Điều gì xảy ra nếu nó nằm thành hai dòng?

— Mahesh

1

Có, khả thi chỉ với không quá một dòng văn bản.

— Wanny Miarelli

1

Đây là điều duy nhất làm việc cho tôi. Các câu trả lời khác không hoạt động.

— adev

34

Bạn có thể sử dụng flexbox cho việc này.

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

Có thể tìm thấy giải thích chi tiết về cách sử dụng flexbox tại đây .

— dimmech
nguồn

4

Tôi đã từng gặp vấn đề tương tự. Thử cái này.

<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;
}

— HesapAdam
nguồn