<Ul> में लंबवत रूप से <li> तत्वों को कैसे संरेखित करें?

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

— akonsu
स्रोत

w3schools.com/css/css_navbar.asp - मुझे पता है कि इसका उत्तर दिया जा चुका है, लेकिन यदि कोई इस पर अभी से

— नज़र रखता है तो

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>

— रिचर्ड जेपी ले गुएन
स्रोत

1

धन्यवाद, यह आंशिक रूप से काम करता है। अर्थात्, पीछे के बक्से की सामग्री केंद्रित है, लेकिन मैं खुद बक्से को कैसे केंद्र करूं?

— अंकोसु

नहीं, नहीं, सूची के बीच में। इस विशेष उदाहरण में, अंतिम बॉक्स पहले तीन से कम होना चाहिए।

— फरवरी को akonsu

@akonsu - मैंने इसे बदल दिया, हालांकि मैंने फायरफॉक्स के अलावा किसी अन्य चीज पर इसका परीक्षण नहीं किया। मुझे पता है अगर यह फिट बैठता है।

— रिचर्ड जेपी ले गुएन

1

रिचर्ड, आपकी मदद के लिए बहुत बहुत धन्यवाद। मैं इन प्रदर्शन प्रकारों के बारे में नहीं जानता था। दुर्भाग्य से वे IE7 में समर्थित नहीं हैं। मुझे प्रत्येक <li>: ampsoft.net/webdesign-l/vertical-aligned-nav-list.html की सामग्री को संरेखित करने का एक तरीका मिला, लेकिन <ul> अंदर <li> संरेखित करने के लिए कोई क्रॉस ब्राउज़र तरीका नहीं लगता है। ..

— akonsu

1

यदि आप IE7 को लक्षित कर रहे हैं, तो आपके पास <?xml?>घोषणा क्यों है ? IE के सभी संस्करण वास्तव में XHTML का समर्थन नहीं करते हैं। मुझे लगता है कि आपको पाठ / HTML को हानिकारक मानते

— रिचर्ड जेपी ले

75

यहाँ एक अच्छा है:

line-heightजो कुछ भी है उसके बराबर सेट करें height; एक जादू की तरह काम करता है!

उदाहरण के लिए:

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

— उतारा
स्रोत

1

क्या आप एक छोटे से उदाहरण के साथ विस्तृत कर सकते हैं?

— लेह

1

परिपूर्ण - पंक्ति-ऊंचाई: 30px; तैरने पर <li> मुझे वही चाहिए था (क्रोम)

— गुरुबेड

1

क्या होता है अगर यह दो लाइनों में रहता है?

— महेश

1

हां, केवल पाठ की एक से अधिक पंक्ति के साथ व्यवहार्य।

— वन्नी मियारेली

1

मेरे लिए यही एक काम है। अन्य जवाब से काम नहीं चला।

— adev

34

आप इसके लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं।

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

फ्लेक्सबॉक्स का उपयोग करने का एक विस्तृत विवरण यहां पाया जा सकता है ।

— 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
स्रोत