सीएसएस ऊर्ध्वाधर संरेखण पाठ ली के अंदर

Question

मैं फिक्स ली ऊंचाई और चौड़ाई के साथ एक पंक्ति में बक्से की संख्या प्रदर्शित कर रहा हूं, <li> टैग से उत्पन्न। अब मुझे ऊर्ध्वाधर केंद्र में पाठ को संरेखित करने की आवश्यकता है। CSS वर्टिकल-अलाइन का कोई प्रभाव नहीं है, शायद मुझे कुछ याद आ रहा है ???

मैं ट्रिक्स (मार्जिन, पैडिंग, लाइन-हाइट) का उपयोग नहीं कर रहा हूं, ये काम नहीं करेंगे क्योंकि कुछ टेक्स्ट लंबे हैं और दो लाइनों में टूट जाएंगे।

कृपया वास्तविक कोड खोजें:

सीएसएस कोड

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

HTML कोड

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Comments

आपको अधिक जानकारी प्रदान करने की आवश्यकता हो सकती है। क्या बक्से एक ही ऊंचाई के हैं? क्या आप ली में बक्से के अंदर पाठ संरेखित कर रहे हैं? "क्योंकि कुछ पाठ लंबे हैं ... दो पंक्तियाँ" ??? एक स्क्रीनशॉट हो सकता है या एक बेला मदद करेगा।

— केएमसी

मैंने बस एक स्क्रीनशॉट पोस्ट करने की कोशिश की, लेकिन यह मुझे अनुमति नहीं देता, क्योंकि मेरा खाता नया है।

— AK4668

Answer 1

साथ माता-पिता को परिभाषित करें display: tableऔर साथ तत्व में ही vertical-align: middleऔर display: table-cell।

Comments

प्रदर्शन तालिका / टेबल-सेल का उपयोग करने के लिए +1। लगता है कि बहुत से लोग अपने अस्तित्व के बारे में नहीं जानते हैं।

— पावरबॉय

यह W3CSchool से है ... नोट: मान "इनलाइन-टेबल", "रन-इन", "टेबल", "टेबल-कैप्शन", "टेबल-सेल", "टेबल-कॉलम", "टेबल-कॉलम- समूह "," तालिका-पंक्ति "," तालिका-पंक्ति-समूह ", और" विरासत "IE7 और उससे पहले समर्थित नहीं है। IE8 को DOCTYPE की आवश्यकता होती है। IE9 मूल्यों का समर्थन करता है।

— एके ४६६

यह समाधान बेकार है क्योंकि यह मार्जिन के किसी भी प्रभाव को पूरी तरह से बंद कर देता है। इसका केवल समाधान ही टन के छद्म तत्व हैं। सीएसएस इतना क्यों चूसता है

— मुहम्मद उमेर

<li>एक पंक्ति में क्या हो रहा है?

— पॉल्कोवनिकोव। एफपी

यदि आप वास्तव में सारणीबद्ध डेटा नहीं दिखा रहे हैं, तो भी यह CATO अभिगम्यता अनुरूप नहीं है।

— Stevo Perisic

Answer 2

line-heightयह है कि आपने पाठ को लंबवत कैसे संरेखित किया है। यह बहुत मानक है और मैं इसे "हैक" नहीं मानता। बस line-height: 100pxअपने को जोड़ोul.catBlock li और यह ठीक हो जाएगा।

इस मामले में आपको ul.catBlock li aइसके बजाय इसे जोड़ना पड़ सकता है क्योंकि सभी पाठ के अंदर liभी एक के अंदर है a। मैंने कुछ अजीब चीजें होती देखी हैं जब आप ऐसा करते हैं, तो दोनों को आज़माएं और देखें कि कौन सा काम करता है।

Comments

मैंने शुरू में लाइन-ऊंचाई का उपयोग किया है, लेकिन जब सामग्री लंबी होगी तो यह 2 लाइनों में टूट जाएगी और मान लीजिए कि प्रत्येक पंक्ति में 100px अंतर है और इसे खराब दिखाई देगा। क्या कोई और तरीका है?

— 1546 में AK4668

मुझे लगता है vertical-align: middleकि आपके पास होने का एक तरीका है display: table-cell। मैंने हालांकि इसका इस्तेमाल कभी नहीं किया। यहाँ देखें: phrogz.net/css/vertical-align/index.html

— लोगान सरमन

महान समाधान - मैंने ली 'लाइन की ऊंचाई' को मेरी न्यूनतम ऊंचाई के समान सेट किया है, और पाठ लंबवत रूप से गठबंधन किया गया है - कम से कम एक दृश्य निरीक्षण के लिए पर्याप्त है। ऊपर 'तालिका' समाधान निश्चित रूप से शब्दार्थ नहीं है, और प्रकृति में हैकिश है। किसी भी समय हम ऐसा कर रहे हैं, हम संवेदनशील परिदृश्य में कहीं न कहीं टूटे हुए प्रदर्शन या विचित्र व्यवहार की संभावना बढ़ा रहे हैं।

— कोडफिनिटी

धन्यवाद! <a> तत्व पर बढ़िया काम करता है! क्या एक सरल समाधान :-) बस इसे सही मूल्य के लिए ट्विस्ट करें और यह लंबवत रूप से परिपूर्ण है!

— असाल

Answer 3

हालाँकि कई वर्षों तक यह प्रतिक्रिया हो सकती है, इस पर आने वाला कोई भी व्यक्ति केवल कोशिश करना चाहता है

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

फ्लेक्सबॉक्स के लिए ब्राउज़र समर्थन इससे कहीं बेहतर है, जब @scottjoudry ने अपनी प्रतिक्रिया ऊपर पोस्ट की थी, लेकिन यदि आप बहुत पुराने ब्राउज़रों का समर्थन करने का प्रयास कर रहे हैं, तो आप अभी भी उपसर्ग या अन्य विकल्पों पर विचार कर सकते हैं। कैनीयूज़: फ्लेक्स

Comments

यह list-style-imageक्रोम के साथ अच्छा नहीं खेलता है - छवि गायब हो जाती है

— बेंजीनर

मैंने इसे बूटस्ट्रैप 4 नेवी-आइटम पर इस्तेमाल किया और यह एकदम सही काम किया। धन्यवाद।

— 010110110101

फ्लेक्स बॉक्स की बचत हमेशा की तरह

— आर्थर मेडिएरोस

Answer 4

हैरानी की बात है (या नहीं), vertical-alignउपकरण वास्तव में इस काम के लिए सबसे अच्छा काम करता है। सबसे अच्छा, कोई जावास्क्रिप्ट की आवश्यकता नहीं है।

निम्न उदाहरण में, मैं स्थिति हूँ outerशरीर के बीच में वर्ग, और innerवर्ग के बीच में outerवर्ग।

पूर्वावलोकन: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

सीएसएस:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

ऊर्ध्वाधर संरेखण उन तत्वों के केंद्रों को संरेखित करके काम करता है जो एक दूसरे के बगल में हैं। एक ही तत्व के लिए अनुलंब-संरेखित करना बिल्कुल कुछ नहीं करता है। यदि आप एक दूसरा तत्व जोड़ते हैं, जिसमें कोई चौड़ाई नहीं है, लेकिन कंटेनर की ऊंचाई है, तो आपका एकल तत्व इस नो-चौड़ाई तत्व के साथ लंबवत केंद्र में जाएगा, इस प्रकार यह लंबवत रूप से केंद्रित होता है। केवल आवश्यकताएं हैं कि आप दोनों तत्वों को इनलाइन (या इनलाइन-ब्लॉक) पर सेट करते हैं, और उनके ऊर्ध्वाधर-संरेखित विशेषता को सेट करते हैं vertical-align: middle।

नोट: आप नीचे दिए गए मेरे कोड में देख सकते हैं कि मेरा <span>टैग और <div>टैग स्पर्श कर रहे हैं। क्योंकि वे दोनों इनलाइन तत्व हैं, एक स्पेस वास्तव में नो-चौड़ाई तत्व और आपके div के बीच एक स्थान जोड़ देगा, इसलिए इसे बाहर छोड़ना सुनिश्चित करें।

Comments

शानदार, यह एक अच्छा अर्थ है। // मैं आपका जवाब अब नहीं दे सकता क्योंकि मेरी न्यूनतम प्रतिष्ठा 15. होनी चाहिए

— AK4668

आप में से जो इस तकनीक की तलाश कर रहे हैं उनके लिए सीधे सवाल - jsfiddle.net/utGVt/385

— Wex

Answer 5

भविष्य में, यह समस्या फ्लेक्सबॉक्स द्वारा हल की जाएगी। अभी ब्राउज़र समर्थन निराशाजनक है, लेकिन यह सभी वर्तमान ब्राउज़रों में एक या दूसरे रूप में समर्थित है।

ब्राउज़र समर्थन: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Flexbox पर पृष्ठभूमि: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Comments

जिस समय यह प्रश्न पूछा गया था, मुझे यकीन नहीं है कि यह एक अच्छा उत्तर होगा, लेकिन आज हम ~ 95% उपसर्ग समर्थन देख रहे हैं, तो मुझे निश्चित रूप से लगता है कि यह एक व्यवहार्य विकल्प है।

— Wex

यदि आप <li> तत्वों को लपेटने के बजाय (सिकुड़ा हुआ) होना चाहते हैं, तो फ्लेक्स-रैप जोड़ें: रैप; <ul> स्तर पर

— थिएरी

मैं इस वर्ग को भी किस तत्व से जोड़ूं?

— मैट एम।

Answer 6

आसफ के जवाब को छोड़कर यहाँ कोई सही जवाब नहीं दिया गया है जो न तो कोई कोड प्रदान करता है और न ही कोई उदाहरण, इसलिए मैं अपना योगदान देना चाहूंगा ...

बनाने के लिए के लिए inorder vertical-align: middle;काम करते हैं, आप उपयोग करने की जरूरत है display: table;अपने लिए ulतत्व और display: table-cell;के लिए liतत्वों और आप उपयोग कर सकते हैं की तुलना में vertical-align: middle;के लिएli तत्वों।

आप किसी भी स्पष्ट प्रदान करने के लिए की जरूरत नहीं है margins, paddingsअपने पाठ खड़ी मध्य बनाने के लिए।

डेमो

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Comments

यह मदद नहीं करता है क्योंकि एकमात्र कारण इसके लंबवत रूप से संरेखित किया गया है क्योंकि आपने इसे एक टैग पर पैडिंग के साथ मजबूर किया है

— str11

@ Mr.Alien मैं फिर से दोहराऊंगा कि इस समाधान के साथ एकमात्र समस्या यह है कि मार्जिन नियमों की अनदेखी की जाती है।

— थॉमस

Answer 7

जैसा कि यहाँ बताया गया है: https://css-tricks.com/centering-in-the-unknown/ ।

जैसा कि वास्तविक व्यवहार में परीक्षण किया गया है, सबसे विश्वसनीय अभी तक सुरुचिपूर्ण समाधान तत्व में एक सहायक इनलाइन तत्व को <li />1 बच्चे के रूप में सम्मिलित करना है, जिसकी ऊंचाई 100% (उसके माता-पिता की ऊँचाई <li />), और उसके vertical-alignमध्य में सेट की जानी चाहिए । इसे प्राप्त करने के लिए, आप एक डाल सकते हैं <span />, लेकिन सबसे सुविधाजनक तरीका li:afterछद्म वर्ग का उपयोग करना है ।

स्क्रीनशॉट:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Answer 8

इस उपाय को आजमाएं

ज्यादातर मामलों में सबसे अच्छा काम करता है

आप उपयोग करना पड़ सकता div के बजाय ली कि के लिए

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

Comments

इसे ऊर्ध्वाधर-संरेखित करने के लिए एक विभाजक की आवश्यकता क्यों है? मैंने इसे एक अन्य विषय पर देखा, लेकिन मैं यह नहीं समझ सकता कि यह बिना किसी अन्य विभाजन के स्वयं को संरेखित क्यों नहीं करता है ..

— साशा चिरिको

Answer 9

वर्टिकल अलाइन मध्य के लिए सरल समाधान ... मेरे लिए यह एक आकर्षण की तरह काम करता है

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}