लंबवत रूप से div (कोई तालिका नहीं)

मैं क्षैतिज रूप से एक div संरेखित कर सकता हूं और सभी सामग्री अच्छी लगती है। लंबवत को एक div को संरेखित करना चाहते हैं जिसमें कोई सारणी नहीं है। मैंने #container के अंदर कुछ नकारात्मक मानों को मार्जिन स्थिति सेट करने का प्रयास किया लेकिन उस तरह का काम किया। मुझे पता है कि सीएसएस अभी तक इसका समर्थन नहीं कर रहा है? यह कैसे वर्तमान में लग रहा है देखने के लिएलंबवत रूप से div (कोई तालिका नहीं)

body 
 
{ 
 
    background: #777; /* gray */ 
 
    text-align: center; 
 
} 
 

 
#container 
 
{ 
 
    margin: 0 auto; 
 
    width: 968px; 
 
    text-align: left; 
 
} 
 

 
#toptab 
 
{ 
 
    background: #f77; /* red */ 
 
    height: 14px; 
 
    width: 968px; 
 
} 
 

 
#middletab 
 
{ 
 
    background: #7f7; /* green */ 
 
    width: 968px; 
 
} 
 

 
#data 
 
{ 
 
    width: 948px; /* 948 for the box plus we need 20 more px to handle the padding */ 
 
    padding-left: 10px; 
 
    padding-right 10px; 
 
} 
 

 
#bottomtab 
 
{ 
 
    background: #77f; /* blue */ 
 
    height: 14px; 
 
    width: 968px; 
 
}

<div id="container"> 
 
    <div id="toptab"></div> 
 
    <div id="middletab"> 
 
     <div id="data"> 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
      The quick brown fox jumped over the big red bear. 
 
     </div> 
 
    </div> 
 
    <div id="bottomtab"></div> 
 
</div>

रन से ऊपर का टुकड़ा लें और फिर "पूरे पृष्ठ":

यहाँ मेरी मार्कअप है। असल में, यह क्षैतिज रूप से बहुत अच्छा लग रहा है, लेकिन अब मुझे पृष्ठ में लंबवत रूप से केंद्र की आवश्यकता है।

तत्व जो मैं लंबवत रूप से संरेखित करना चाहता हूं वह #container div है। प्रभाव पूरे div और सभी उप divs को क्षैतिज रूप से गठबंधन करने के लिए मजबूर नहीं करेगा बल्कि लंबवत भी होगा। मुझे पता है कि यह संभव है और मुझे पता है एंडी बड ने ऐसा समाधान पोस्ट किया लेकिन यह मेरे लिए काम नहीं कर रहा है।

स्रोत

2009-12-15 JonH

आप खड़ी वितरित मतलब है/उचित या सिर्फ केंद्रित क्या में खड़ी दिखाई जाने वाली पृष्ठ? –

@Eric अंतिम परिणाम पृष्ठ के मध्य में सामग्री के साथ परिपत्र बॉक्स है। अभी तक जैसा कि आप देखते हैं कि सामग्री केंद्रित है लेकिन केवल शीर्ष पर केंद्रित है। मुझे इसे सीधे पृष्ठ के मध्य में केंद्रित करने की आवश्यकता है। – JonH

जहां तक मैंने देखा है कि आपको थोड़ी-थोड़ी जावास्क्रिप्ट करना है जबतक कि आप एक निश्चित-ऊंचाई पृष्ठ नहीं चाहते हैं, जिसे मैं संदेह करता हूं। –

जब तक आपके पास अपने कंटेनर की ऊंचाई को स्पष्ट रूप से सेट करने की क्षमता नहीं है (जो कि इस तरह की स्थिति नहीं दिखती है), कोई क्रॉस ब्राउज़र समाधान आपके डीवी कंटेनर को लंबवत केंद्रित करने के लिए नहीं है।

तालिका का उपयोग पूरी तरह व्यवहार्य है, लेकिन आपने ध्यान दिया है कि इसका उपयोग नहीं किया जा सकता है।

यदि जावास्क्रिप्ट एक विकल्प है, तो हम आसानी से आपके लिए इसका समाधान कर सकते हैं। एक कंटेनर लंबवत संरेखित करने के लिए एक jQuery प्लगइन पहले से मौजूद है।

(function ($) { 
    // VERTICALLY ALIGN FUNCTION 
    $.fn.vAlign = function() { 
     return this.each(function(i){ 
      var ah = $(this).height(); 
      var ph = $(this).parent().height(); 
      var mh = (ph - ah)/2; 
      $(this).css('margin-top', mh); 
     }); 
    }; 
})(jQuery);

और तुम खड़ी इसलिए की तरह एक DIV ब्लॉक संरेखित होगा:

$('#example').vAlign();

Simple Vertical Align Plugin से लिया।

स्रोत

2009-12-15 19:36:16

@cballou कोई तरीका नहीं है कि मैं कंटेनर की ऊंचाई बताने में सक्षम हूं, यह भिन्न हो सकता है :(। लेकिन अगर मुझे लगता है कि यह सबसे अधिक होने वाला 500px कहता है। मार्कअप का उपयोग करके मैं क्या कर सकता हूं? – JonH

मैंने इसे कोई भाग्य # कंटेनर { \t मार्जिन: 0 ऑटो; \t चौड़ाई: 968 पीएक्स; \t टेक्स्ट-संरेखण: बाएं; \t स्थिति: पूर्ण; \t शीर्ष: 50%; \t शेष: 50%; \t ऊंचाई: 484 पीएक्स; \t मार्जिन-टॉप: -9em;/* अपनी ऊंचाई के नकारात्मक संख्या 1/2 पर सेट करें */ \t मार्जिन-बाएं: -15em;/* अपनी चौड़ाई के नकारात्मक नंबर 1/2 पर सेट करें */ } – JonH

@ जोनएच: यदि इसमें * निश्चित * ऊंचाई नहीं है, तो आप इसे जावास्क्रिप्ट के बिना लंबवत केंद्र बनाने में सक्षम नहीं होंगे। –

Vertical Centering With CSS या Vertically center content with CSS या CSS Vertical Centering पर एक नज़र डालें। पहले संदर्भ का विधि 3 CSS vertical center using float and clear जैसा ही है।

और यह निश्चित रूप से की तरह browsershots.org

संपादित एक सेवा के साथ परिणाम परीक्षण करने के लिए एक अच्छा विचार है: मैं अपने सीएसएस और मार्कअप संशोधित विधि 3 लागू करने के लिए:

सीएसएस:

* { 
    margin:0; 
    padding:0; 
} 

html, 
body { 
    height: 100%; 
} 

body { 
    text-align:center; 
} 

#floater { 
    float: left; 
    height:50%; 
    margin-bottom: -100px; 
} 

#container 
{ 
    clear:both; 
    position: relative; 
    margin: 0 auto; 
    width:968px; 
    text-align: left; 
    height: 200px; 
} 

...

मार्कअप:

<body> 
<div id="floater"></div> 
<div id="container"> 

...

इस विधि में मुझे जो कमी दिखाई देती है वह है कि सीएसएस के साथ आपको अपनी सामग्री की ऊंचाई पर जानना है, ताकि आप फ्लोटर में आधा ऊंचाई का नकारात्मक मार्जिन लागू कर सकें। उदाहरण में मैंने 200px चुना है।

See it in action।

स्रोत

2009-12-15 19:31:23

मुझे किसी भी लेख की आवश्यकता नहीं है जिसे मैंने बहुत पढ़ा है। मुझे नकारात्मक मार्जिन मानों के साथ काम करने के लिए प्रतीत नहीं होता है। – JonH

यदि विषय कभी भी अनुपलब्ध है, तो यह प्रतिक्रिया अपर्याप्त होगी। क्या आप निर्देशों को अपने उत्तर में माइग्रेट करना चाहते हैं, और मूल लेखकों को क्रेडिट दें। इस तरह लोगों को आपकी प्रतिक्रिया के मूल्य का वजन करने के लिए पृष्ठ से पृष्ठ पर उछाल नहीं पड़ता है? – Sampson

@ जोनएच> एक आदमी को एक मछली दें ... –

समझौता के साथ ऐसा करने के कुछ तरीके हैं।

उपयोग position:absolute, एक निश्चित ऊंचाई, और overflow:auto।
उपयोग display:table, display:table-cell, और vertical-align:middle
उपयोग जावास्क्रिप्ट

मुझे लगता है कि विकल्प # 2 बहुत अच्छी है।

संपादित करें: मुझे नहीं लगता कि विकल्प 2 आईई में काम करेगा। यदि आप ऊंचाई को गतिशील रखना चाहते हैं तो आप जावास्क्रिप्ट से फंस सकते हैं।

स्रोत

2009-12-15 19:35:40

क्रॉस ब्राउज़र संगतता समझौता करता है: संपूर्ण आईई परिवार सटीक होना चाहिए। –

@cballou, या मैंने बस इसके बारे में सोचा था और जब आप अपनी टिप्पणी छोड़ रहे थे तो मेरी पोस्ट संपादित कर रही थी: पी –

यदि आपका मुख्य कंटेनर की ऊंचाई तरल पदार्थ है, तो आपकी एकमात्र विश्वसनीय पसंद जावास्क्रिप्ट का उपयोग करना है ("भरोसेमंद" निश्चित रूप से यहां पर बहस योग्य है)। जावास्क्रिप्ट में, आपको पहले कंटेनर की ऊंचाई, फिर खिड़की की ऊंचाई और तदनुसार शीर्ष ऑफ़सेट समायोजित करना होगा। यहाँ कैसे आप jQuery में ऐसा करेंगे:

$(function() { 
    $(window).resize(function() { 
     var top = $(window).height()/2 - $('#content').height()/2; 
     top = top < 0 ? 0 : top; 
     $('#content').css('top', top); 
    }); 
    $(window).resize(); 
});

और सीएसएस यह काम कर रहे हैं:

#content { 
    position: absolute; 
    /* Everything else is optional: */ 
    width: 960px; 
    margin: 0 auto; 
}

और HTML:

... 
<body> 
    <div id="#content">Content here</div> 
</body> 
</html>

अभी भी काफी आसान है यही कारण है, और होगा यदि उपयोगकर्ता जावास्क्रिप्ट सक्षम है तो काम करें।

स्रोत

2009-12-15 19:46:20

इस फ़ंक्शन के साथ मेरा एकमात्र पकड़ यह है कि यह केवल बॉडी टैग का प्रत्यक्ष बच्चा होने पर ही ठीक से काम करेगा। मैंने जो प्लगइन पोस्ट किया है वह केंद्र की स्थिति की गणना के लिए इसके मूल कंटेनर का उपयोग करता है। –

शुद्ध सीएसएस के साथ, इस केवल संभव है div एक तयheight है या नहीं। इसके top और 50% को left और margin-top और margin-left अपने width और height क्रमशः के नकारात्मक आधा करने के लिए इसके बाद आप position यह absolute कर सकते हैं और निर्धारित किया है।

यहां एक SSCCE है, बस कॉपी करें 'n'paste'n'run'। सीमा पूरी तरह प्रस्तुतिकरण है, शेष शैलियों की आवश्यकता है।

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 1909753</title> 
    </head> 
    <style> 
     #content { 
      position: absolute; 
      width: 300px; 
      height: 200px; 
      top: 50%; 
      left: 50%; 
      margin-left: -150px; /* Negative half of width. */ 
      margin-top: -100px; /* Negative half of height. */ 
      border: 1px solid #000; 
     } 
    </style> 
    <body> 
     <div id="content"> 
      content 
     </div> 
    </body> 
</html>

यदि वहाँ एक निश्चित ऊंचाई का कोई साधन नहीं है, तो आप जावास्क्रिप्ट समझ और तथ्य यह है साथ रहने के लिए है कि ग्राहक div जल्दी से पेज लोड होने के दौरान बीच में स्थानांतरित किया जा रहा देखेंगे, एक कारण हो सकता है जो "की आवश्यकता होगी WTF? " अनुभव।

स्रोत

2009-12-15 19:50:34 BalusC

+1 उस के लिए – JonH

मुझे लगता है कि display: table के बिना ऐसा करना संभव है।

इस

उदाहरण है:

HTML:

<div class="notificationArea"> 
    something 
</div>

सीएसएस:

.notificationArea 
{ 
    position: absolute; 
    top: 50%; 
    bottom: 50%; 
    right: 50%; 
    left: 50% 
}

स्रोत

2011-03-04 23:32:22 drasto

आपका क्या मतलब है? आपके सीएसएस में एक 'डिस्प्ले: टेबल' नियम है और यह div लंबवत रूप से केंद्रित नहीं है ... –

डेमो किसी कारण से एक और उदाहरण दिखा रहा था। मैंने इसे एक्टुअल कोड से बदल दिया। – drasto

एक कंटेनर div शैली display: table साथ बनाओ और आंतरिक तत्वों कि display: inline-block

हैं पर शैली vertical-align: top का उपयोग

कार्यशील डेमो http://jsfiddle.net/uzcrt/

स्रोत

2012-05-30 19:54:23

CSS वर्ग स्क्रीन के बीच में एक तत्व संरेखित करने के लिए:

.middle{ 
    position: absolute; 
    top: 50%; /*50% from top*/ 
    left: 50%; /*50% from left*/ 

    /*remove 50% of element width and height to align the element center in the position*/ 
    transform: translateY(-50%) translateX(-50%); 
}

अब, HTML तत्व को इस वर्ग को जोड़ने के

स्रोत

2017-03-22 11:54:03

लंबवत रूप से div (कोई तालिका नहीं)

उत्तर

संबंधित मुद्दे