परिभाषित चौड़ाई / ऊंचाई के साथ एक div की सामग्री के केंद्र में लंबवत संरेखित कैसे करें?

Question

परिभाषित चौड़ाई / ऊंचाई में किसी भी सामग्री को लंबवत रूप से केन्द्रित करने की सही विधि क्या होगी div।

में उदाहरण के अलग-अलग ऊंचाइयों के साथ दो सामग्री देखते हैं, खड़ी दोनों वर्ग का उपयोग कर केंद्र के लिए सबसे अच्छा तरीका क्या है .content। (और यह हर ब्राउज़र के लिए और समाधान के बिना काम करता है table-cell)

मन पर कुछ समाधान है, लेकिन अन्य विचारों को जानना चाहते हैं, एक का उपयोग कर रहा है position:absolute; top:0; bottom: 0;और margin auto।

Comments

आपके प्रश्न पूरी तरह से आत्म-निहित होने चाहिए। अन्यथा, जब URL मृत हो जाता है, तो यह बेकार है।

— स्पार्कली

संभव डुप्लिकेट: मैं गतिशील रूप से उच्च div में अनुलंब रूप से केंद्र पाठ कैसे कर सकता हूँ

— doptrois

शायद, लेकिन उस समय मेरे पास समाधान नहीं था ... यह अधिक विकल्प प्रदान करता है

— रिकार्डो रॉड्रिक्स

tl; 2020 में डॉ : display: flex; align-items: center;। यदि आप नहीं चाहते कि यह क्षैतिज रूप से अच्छी तरह से केंद्रित हो, तो जोड़ें flex-direction: column;।

— डेविन बर्क

Answer 1

मैंने इस पर थोड़ा शोध किया है और जो मैंने पाया है उससे आपके पास चार विकल्प हैं:

संस्करण 1: टेबल-सेल के रूप में डिस्प्ले के साथ पैरेंट डिव

अगर आपको display:table-cellअपने पैरेंट डिव पर इस्तेमाल करने में कोई आपत्ति नहीं है , तो आप निम्नलिखित विकल्पों का उपयोग कर सकते हैं:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

लाइव डेमो

---

संस्करण 2: डिस्प्ले ब्लॉक और कंटेंट डिस्प्ले टेबल-सेल के साथ पैरेंट डिव

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

लाइव डेमो

---

संस्करण 3: पैरेंट डिव फ्लोटिंग और कंटेंट डिव डिस्प्ले टेबल-सेल के रूप में

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

लाइव डेमो

---

संस्करण 4: सामग्री की स्थिति निरपेक्ष के साथ माता-पिता div स्थिति

इस संस्करण के साथ मेरे पास एकमात्र समस्या यह है कि ऐसा लगता है कि आपको हर विशिष्ट कार्यान्वयन के लिए सीएसएस बनाना होगा। इसका कारण यह है कि कंटेंट div के लिए सेट की ऊँचाई होनी चाहिए जो कि आपका टेक्स्ट भरेगा और मार्जिन-टॉप का पता लगाया जाएगा। इस मुद्दे को डेमो में देखा जा सकता है। आप अपनी सामग्री div की ऊँचाई% को बदलकर और इसे अपने मार्जिन-टॉप मान को प्राप्त करने के लिए इसे -.5 से गुणा करके हर परिदृश्य के लिए काम कर सकते हैं।

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

लाइव डेमो

Comments

@JoshMein: कुछ अधिक समाधान: कैसे कर सकते हैं मैं एक गतिशील उच्च div में खड़ी केंद्र पाठ

— doptrois

संस्करण 2 वही है जो मैं ढूंढ रहा हूं, हालांकि सामग्री खड़ी रूप से केंद्रित नहीं होती है। क्या यह मायने रखता है कि क्या areaइसमें निहित है, या क्या contentसामग्री है?

— शिमी वेइटहैंडलर

Answer 2

यह display: flexकोड की केवल कुछ पंक्तियों के साथ भी किया जा सकता है । यहाँ एक उदाहरण है:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

लाइव डेमो

Comments

@ हनीजर केवल अगर आप इसे क्षैतिज रूप से भी केन्द्रित करना चाहते हैं, या यदि आपने सेट किया होगाflex-direction: column

— Martin36

Answer 3

मुझे इस लेख में इसका समाधान मिला

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

यह एक आकर्षण की तरह काम करता है अगर तत्व की ऊंचाई तय नहीं है।

Comments

जेएफवाईआई, मुझे एक ही लेख मिला और उस दृष्टिकोण का उपयोग किया। क्रोम में काम करने के लिए मुझे स्थिति को निरपेक्ष में बदलना पड़ा।

— जैक ए।

@JackA। position: relative62 क्रोम में काम करता है । यकीन नहीं होता कि कितनी दूर चला जाता है।

— जैरेड स्मिथ

Answer 4

मार्जिन: all_four_margin

all_four_margin को 50% प्रदान करके तत्व को केंद्र में रखा जाएगा

style="margin: 50%"

आप इसे निम्नलिखित के लिए भी लागू कर सकते हैं

मार्जिन: ऊपर दाईं ओर नीचे

मार्जिन: ऊपर दाएं और बाएं नीचे

मार्जिन: ऊपर और नीचे दाएं और बाएं

उचित% देने से हम जहां चाहें तत्व प्राप्त कर लेते हैं।

Comments

कृपया स्पष्ट करें, आपका शब्दांकन सभी जगह और असंतुष्ट सा प्रतीत होता है।

— बेंजामिन ट्रेंट

खराब वाक्यांशों के साथ अस्पष्ट उत्तर और के लिए संभावित मानों को सूचीबद्ध करने के लिए सीमित है margin।

— नूनो