<ul>에서 <li> 요소를 세로로 정렬하는 방법은 무엇입니까?

97

나는 수평을 가지고 있고 <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>

— Richard JP Le Guen
소스

1

감사합니다. 이것은 부분적으로 작동합니다. 즉, 뒷면 상자의 내용은 중앙에 있지만 상자 자체를 중앙에 배치하려면 어떻게해야합니까?

— akonsu

아니, 아니, 목록의 중간. 이 특정 예에서 마지막 상자는 처음 세 개보다 낮아야합니다.

— akonsu

@akonsu-FireFox 이외의 다른 제품에서는 테스트하지 않았지만 변경했습니다. 맞는지 알려주세요.

— Richard JP Le Guen

1

리차드, 도와 주셔서 감사합니다. 이러한 디스플레이 유형에 대해 몰랐습니다. 불행히도 IE7에서는 지원되지 않습니다. 각 <li>의 내용을 정렬하는 방법을 찾았습니다 : ampsoft.net/webdesign-l/vertical-aligned-nav-list.html 그러나 <ul> 내부에 <li>를 정렬하는 크로스 브라우저 방법이없는 것 같습니다. ..

— akonsu 2010-08-04

1

IE7을 대상으로하는 경우 <?xml?>선언 이있는 이유는 무엇입니까? 모든 버전의 IE는 실제로 XHTML을 지원하지 않습니다. XHTML을 text / html로 보내기를 읽어야 할 것 같습니다. 유해한 것으로 간주 됨 : hixie.ch/advocacy/xhtml

— Richard JP Le Guen

75

다음은 좋은 것입니다.

line-height무엇이든 동일하게 설정height . 매력처럼 작동합니다!

예 :

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

— 걸어 건너기
소스

1

작은 예를 들어 설명해 주시겠습니까?

— Leigh

1

Perfect-라인 높이 : 30px; 떴다 <LI>에서의 내가 (크롬) 필요한 것이었다

— GuruBob

1

두 줄로 배열하면 어떻게됩니까?

— Mahesh 2015

1

예, 한 줄 이상의 텍스트로만 실행 가능합니다.

— Wanny Miarelli

1

이것은 나를 위해 일한 유일한 것입니다. 다른 답변은 작동하지 않았습니다.

— adev

35

이를 위해 flexbox를 사용할 수 있습니다.

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

flexbox 사용 방법에 대한 자세한 설명은 여기 에서 찾을 수 있습니다 .

— Dimmech
소스

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

— HesapAdam
소스