ट्रू सेंटर वर्टिकल और क्षैतिज सीएसएस डिव

एक होल्डिंग पेज के भीतर उपयोग करने के लिए एक सच्चे केंद्र सीएसएस डिव क्रॉस ब्राउज़र बनाने के लिए कैसे संभव है?ट्रू सेंटर वर्टिकल और क्षैतिज सीएसएस डिव

मैं यह 2007 सीएसएस चाल की कोशिश की है - How To Center an Object Exactly In The Center लेकिन आप मेरी कोड के JSFiddle इसकी% नहीं 100 केंद्र से देख सकते हैं।

HTML:

<div class="center"> 
    <p>Text</p> 
</div>

सीएसएस:

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

स्रोत

2013-01-07 Jess McKenzie

'मार्जिन: 0 ऑटो 'पर्याप्त क्यों नहीं है? – meagar

@ मीगर: वह केवल क्षैतिज रूप से केंद्रित है, लंबवत नहीं। – icktoofay

आह। प्रश्न वास्तव में इंगित करना चाहिए कि इरादा * लंबवत * केंद्र तत्वों के लिए है। – meagar

कि तकनीक तत्व की आवश्यकता है एक निश्चित चौड़ाई और ऊंचाई है। आप चौड़ाई और ऊंचाई निर्धारित नहीं कर रहे हैं। अपनी सीमा और मार्जिन के आधार पर, इसे केन्द्रित करने के लिए, चौड़ाई को 190 पिक्सेल होने की आवश्यकता होगी और ऊंचाई 90 पिक्सेल होने की आवश्यकता होगी। एक निश्चित चौड़ाई और ऊंचाई के संयोजन में line-height और text-align का उपयोग करके पाठ और सीमा केंद्रित होती है। Try it.

सीएसएस

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 190px; 
    height: 90px; 
    line-height: 90px; 
    text-align: center; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

स्रोत

2013-01-07 03:53:19 icktoofay

<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>

उदाहरण के लिए

<!DOCTYPE html> 
<html> 
<body> 
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div> 
</body> 
</html>

स्रोत

2013-01-07 03:54:35 derWilly

यह मैं क्या किया है

<html> 
<head> 
    <title>Page Title</title> 

    <style> 
     .center { margin:auto; width:500px; background-color:green; } 
    </style> 
</head> 
<body> 
    <div class="center"> 
     <p>Help me please</p> 
    </div> 
</body> 
</html>

उम्मीद है कि यह मदद करता है।

स्रोत

2013-01-07 03:57:51

आप शुद्ध सीएसएस के साथ ऐसा कर सकते हैं:

html { 
    width: 100%; 
    height: 100%; 
} 
body { 
    min-width: 100%; 
    min-height: 100%; 
} 
div.centeredBlueBox { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    width: 300px; 
    height: 200px; 
    background-color: blue; 
}

यह ठोस देने के लिए महत्वपूर्ण है (जैसे: 300px) और नहीं ली गई: width और height के लिए (जैसे auto या 30%) मान।

स्रोत

2013-01-20 09:35:41

मुझे लगता है, यह सबसे अच्छा काम करता है। यह अभी भी अन्य आकारों को पुन: प्राप्त करने की आवश्यकता के बिना सामग्री का आकार बदलने के साथ काम करता है – BananaAcid

मेरी समाधान है कि:

<div style="position: absolute; left: 50%; height: 100%;"> 
    <div style="position: relative; left: -50%; display: table; height: 100%;"> 
     <div style="display: table-cell; vertical-align: middle;"> 
      //your content here 
     </div> 
    </div> 
</div>

यह ब्राउज़र का एक बहुत में काम करता है। और लेआउट के बाद जोड़ा गया सामग्री के साथ कोई समस्या नहीं है।

स्रोत

2013-07-24 08:15:13 AKonst

यह आईई वर्टिकल संरेखण के लिए बनाए गए ऊंचाई सेटटर के साथ एक अतिरिक्त उदाहरण है। अतिरिक्त अवधि में लंबवत-संरेखण होता है: मध्य।

<style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     overflow:hidden; 
     text-align:center; 
    } 
    html, body{ 
     height: 100%; 
    } 
    #loginContainer { 
     margin: 0 auto; 
     display: table; 
     min-width:300px; 
     text-align:left; 
     height: 85%; /* vertical align not exact in the middle */ 
    } 
    #loginContainer .label{ 
     width: 25%; 
     float:left; 
     white-space:nowrap; 
     line-height:20px; 
    } 
    #loginContainer h2{ 
     border-bottom:2px solid #B4C3E1; 
     border-width:0 0 3px; 
     padding:2px 4px; 
    } 
    .mainHeader { 
     position:absolute; 
     top:0; 
     left:0; 
     text-align:center; 
     width:100%; 
     font-size:2em; 
     white-space:nowrap; 
    } 
    .detailsText { 
     border-top:1px solid #F60; 
     margin-top:5px; 
     clear:both; 
    } 
    /* layout horizontal and vertical */ 
    .horizontalBox { 
     display: table-cell; 
     vertical-align: middle; /* not seen by IE6-7 */ 
     height: 100%; 
     white-space: nowrap; 
    } 
    .verticalBox { 
     padding: 55px 0 0 0; /* 55px height of logo */ 
    } 
    .rightText { 
     text-align:right; 
    } 
</style> 
<!--[if lte IE 8]> 
<style type="text/css"> 
    #loginContainer { 
     width:300px; /* minimum width */ 
    } 
    .horizontalBox { 
     text-align: center; 
    } 
    .verticalBox, .heightSetter { 
     display: inline-block; 
     vertical-align: middle; 
     text-align: left; 
     zoom:1; 
    } 
    .heightSetter { 
     height: 100%; 
    } 
    .verticalBox { 
     display: inline; 
     height: 0; 
    } 
    .heightSetter { 
     width: 1px; 
    } 
</style>  
<![endif]--> 
<div class="mainHeader">This is the Header content</div> 
<div id="loginContainer"> 
    <div class="horizontalBox"> 
     <div class="verticalBox"> 
      <h2>My header of the vertical box</h2> 
      <p>My Content</p> 
     </div> 
     <span class="heightSetter"></span> 
    </div> 
</div>

स्रोत

2013-08-14 20:38:29

this पर एक नज़र डालें; काफी चालाक लेख।

स्रोत

2013-12-23 23:57:31

DIVtable-cell पर टाइप करें। फिर आप TD तत्व की तरह सामान्य vertical-align का उपयोग कर सकते हैं।

<div style="display: table-cell; vertical-align: middle; height: 200px;"> 
Centered Text 
</div>

स्रोत

2014-03-20 00:59:43 kpruner

ट्रू सेंटर वर्टिकल और क्षैतिज सीएसएस डिव

उत्तर

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