मैं एक स्पैन टैग के अंदर लंबवत रूप से कैसे संरेखित करूं?

Question

स्पान के बीच में लंबवत-संरेखित होने के लिए मुझे "x" कैसे मिलता है?

.foo {
    height: 50px;
    border: solid black 1px;
    display: inline-block;
    vertical-align: middle;
}

<span class="foo">
   x
</span>

Answer 1

line-height:50px;ऊंचाई के बजाय उपयोग करें । यह ट्रिक काम आना चाहिए ;)

Comments

उत्कृष्ट! यह किसी भी प्रकार के टैग के लिए काम करता है। मेरे मामले में, <img> पर काम किया।

— फेलिप कॉनडे

समस्या तब होती है जब पाठ लपेटता है। दो पंक्तियों के साथ यह स्पैन 100px ऊंचाई के साथ प्रदान किया जाएगा।

— नोरबर्टो योआन

यदि आपका पाठ लपेटता है तो मेरा उत्तर @NorbertoYoan

— Hashbrown

@Sumit के लिए ditto ( SO की टिप्पणियों के साथ मुद्दे के कारण दोहराए गए )

— Hashbrown

यह शीर्ष मतदान का जवाब नहीं होना चाहिए, सामग्री के आधार पर समाधान कुछ अन्य अवांछित परिणाम दे सकता है।

— राफेलमोरैस

Answer 2

इस बात से अवगत रहें कि line-heightयदि आपके पास एक लंबा वाक्य है तो वह विफल हो spanजाता है जिसमें लाइन टूट जाती है क्योंकि पर्याप्त जगह नहीं है। इस स्थिति में, आपके पास संपत्ति में निर्दिष्ट एन पिक्सल की ऊंचाई के साथ अंतराल के साथ दो लाइनें होंगी।

मैं इसमें तब फंस गया जब मैं इसके दाईं ओर लंबवत केंद्रित पाठ के साथ एक छवि दिखाना चाहता था जो एक उत्तरदायी वेब एप्लिकेशन में काम करता है। एक आधार के रूप में मैं एरिक निकस और फेलिप टेडो द्वारा सुझाए गए दृष्टिकोण का उपयोग करता हूं।

यदि आप प्राप्त करना चाहते हैं:

और इस:

.container {
    background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image's size */
    height: 40px; /* image's height */
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}

.container span {
    height: 40px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}

<span class="container">
    <span>This is a centered sentence next to an image</span>
</span>

Comments

डायनामिक ऊँचाई क्या है

— अल्बर्टो एक्यूना

Answer 3

यदि आपको कई लाइनों की आवश्यकता है, तो यह सबसे आसान तरीका है। spanदूसरे में आप का पाठ लपेटें spanऔर इसके साथ इसकी ऊंचाई निर्दिष्ट करें line-height। कई पंक्तियों को चाल भीतरी रीसेट करने है spanकी line-height।

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /*set height*/;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*set line height back to normal*/
}

डेमो

बेशक बाहरी spanएक divया व्हायावेउ हो सकता है

Comments

spanकिसी भी अन्य इनलाइन तत्व की तरह, किसी भी HTML इनलाइन तत्व को शामिल किया जा सकता है । भले ही, मैं ने लिखा है कि textvalignmiddleएक हो सकता है divयदि ऐसा है तो आवश्यक (और आप के लिए यह निर्धारित कर सकते हैं display:inline;का उपयोग कर के लिए इतना खिलाफ यदि आप कर रहे हैं spans)

— Hashbrown

मेरा मतलब है कि वे नहीं होना चाहिए। वे पाठ युक्त हैं। वरदान का उपयोग करें।

— जोर्जेफ

spanहै सामान्य इनलाइन कंटेनर केवल पाठ किया जा रहा है पर इतना एचटीएमएल और does not संकेत के रूप में के लिए; `यह स्टाइल के उद्देश्यों के लिए समूह तत्वों के लिए इस्तेमाल किया जा सकता है ...`। मैं सुझाव देता हूं कि अपने निजी कोडिंग मानकों को दूसरों पर धकेलने से पहले आप उन्हें तथ्य के रूप में

— बताएं

किसी भी तरह से, बातचीत की यह पंक्ति तकनीकी अर्थों में प्रश्न के लिए रचनात्मक नहीं है और एसओ में क्या टिप्पणी है

— हैशब्रोएन

मेरे लिए भी काम करता है। स्पैन की तुलना में एक अलग तत्व का इस्तेमाल किया।

— चोकलेट

Answer 4

फ्लेक्सबॉक्स तरीका:

.foo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}

Comments

चूँकि .fooएक स्पैन display: flex-inlineबेहतर होगा

— कोआला

क्या आपका मतलब "इनलाइन-फ्लेक्स" था?

— टिम गेरहार्ड

Answer 5

मुझे लिंक के लिए इसकी आवश्यकता थी, इसलिए मैंने एक टैग और एक डिव के साथ स्पैन को लपेटा, फिर स्पैन टैग को ही केंद्रित किया

एचटीएमएल

<div>
    <a class="tester" href="#">
        <span>Home</span>
    </a>
</div>

सीएसएस

.tester{
    display: inline-block;
    width: 9em;
    height: 3em;
    text-align: center;
}
.tester>span{
    position: relative;
    top: 25%;
}

Comments

इसके लिए धन्यवाद, मैं सीएसएस के साथ खिलवाड़ करने से नफरत करता हूं, मैं सारा दिन एक तत्व को खड़ी करने की कोशिश कर रहा था जब मैं यहां आपके उत्तर में आया था। तुम एक जीवन रक्षक हो!

— टॉड नेस्टर

Answer 6

सीएसएस ऊर्ध्वाधर केंद्र छवि और पाठ

मेरे पास वर्टिकल इमेज सेंटर के लिए एक डेमो है और मेरे पास फायरफॉक्स, क्रोम, सफारी, इंटरनेट एक्सप्लोरर 9 और 8 पर भी टेस्ट है।

यह बहुत छोटा और आसान css और html है, कृपया नीचे दिए गए कोड की जांच करें और आप स्क्रीनशॉट पर आउटपुट पा सकते हैं।

एचटीएमएल

<div class="frame">
    <img src="capabilities_icon1.png" alt="" />
</div>

सीएसएस

  .frame {
        height: 160px;      
        width: 160px;
        border: 1px solid red;
        white-space: nowrap;
        text-align: center; margin: 1em 0;
    }

    .frame::before {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        content:"";
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
    }

आउटपुट यहां छवि विवरण दर्ज करें

Answer 7

यह मेरे लिए काम करता है (केल्टेक्स ने कहा था)

.foo {
height: 50px;
...
}
.foo span{
vertical-align: middle; 
}

<span class="foo"> <span>middle!</span></span>

Answer 8

ऊर्ध्वाधर-संरेखित सीएसएस विशेषता वह नहीं करती है जो आप दुर्भाग्य से अपेक्षा करते हैं। यह लेख सीएसएस का उपयोग करके किसी तत्व को लंबवत रूप से संरेखित करने के 2 तरीके बताता है।

Answer 9

X को नीचे धकेलने के लिए पैडिंग-टॉप को एक उचित मान सेट करें, फिर ऊंचाई से पैडिंग-टॉप के लिए आपके पास मौजूद मूल्य को घटाएं।