1. घर
  2. सवाल और जवाब
  3. एक div क्षैतिज और ऊर्ध्वाधर केंद्र कैसे करें?

एक div क्षैतिज और ऊर्ध्वाधर केंद्र कैसे करें?

2010-12-01 16 views
12

यहाँ स्रोत कोड है:एक div क्षैतिज और ऊर्ध्वाधर केंद्र कैसे करें?

<div id = "outer"> 
    <div id="top"> 
    .... 
    </div> 

    <div id="inner"> 
    .... 
    </div> 

    <div id="bottom"> 
    .... 
    </div>  
</div>

मुझे पता है कि div (आईडी भीतरी), क्षैतिज & लंबवत केंद्र बनाने के लिए चाहते हैं? मैं क्षैतिज केंद्र कर सकता हूं, लेकिन एक लंबवत केंद्र नहीं बना सकता ... धन्यवाद।

स्रोत

2010-12-01 Tattat

उत्तर

1

साथ सबसे आसान और विश्वसनीय तरीका यह जावास्क्रिप्ट के साथ है करने के लिए प्रयास करें। this ब्लॉग पोस्ट में दिए गए कोड को आज़माएं। सीएसएस में ऐसा करने की कोशिश करना एक दुःस्वप्न है, क्योंकि सीएसएस को लंबवत संरेखण को संभालने के लिए डिज़ाइन नहीं किया गया था।

स्रोत

2010-12-01 15:05:30 syrion

11

यदि आप आंतरिक div के आयामों को जानते हैं तो आप सीएसएस का उपयोग कर सकते हैं।

#outer { 
    position: relative; 
} 

#inner { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    left: 50%; 
    top: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
}

अन्य विकल्प display: table-cell और vertical-align: middle आदि का उपयोग कर

अन्य विकल्प जावास्क्रिप्ट को शामिल गतिशील भीतरी div के आयाम को निर्धारित करने और इसके बाद के संस्करण की तरह नकारात्मक हाशिए सेट करने के लिए कर रहे हैं।

स्रोत

2010-12-01 15:06:09 skajfes

1

आपको display: table-cell;, vertical-align: middle; का उपयोग जावास्क्रिप्ट के बिना पूरा करने के लिए करना होगा।

स्रोत

2011-06-08 14:34:49 ricosrealm

0 
<!doctype html> 
<html> 
<head> 
<title>Centered Image Gallery</title> 
<style type="text/css"> 

/* Use height:100% for top-level containers for fluid height */ 
html, body, .container, .placeholder { height: 100%;} 

/* Set image dimensions and offsets */ 
img { width:16px; height:16px; margin-left: 20px; margin-top: 10px; } 

/* Use text-align:center for content container for fluid horizontal centering */ 
.container { text-align:center; } 

/* Use width of less than 100% for Firefox and Webkit */ 
.wrapper { width: 50%; } 

/* Use vertical-align:middle for fluid vertical centering */ 
.placeholder, .wrapper, .content { vertical-align: middle; } 

/* Use inline-block for wrapper and placeholder so vertical-align works */ 
.placeholder, .wrapper { display: inline-block; } 

/* Use min-width to make the inner container a responsive block element */ 
.fixed { min-width: 1px; } 

/* Use display:inline so text-align works */ 
.content { display:inline; } 

@media, 
{ 
.wrapper { display:inline; } 
} 
</style> 

</head> 
    <body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div class="fixed"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://microsoft.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
      <img src="http://mozilla.com/favicon.ico"> 
      <img src="http://webkit.org/favicon.ico"> 
      <img src="http://userbase.kde.org/favicon.ico"> 
      <img src="http://www.srware.net/favicon.ico"> 
      <img src="http://build.chromium.org/favicon.ico"> 
      <img src="http://www.apple.com/favicon.ico"> 
      <img src="http://opera.com/favicon.ico"> 
     </div> 
     </div> 
    </div> 
    <span class="placeholder"></span> 
</div> 

</body> 
</html>

स्रोत

2012-06-22 00:41:35

0

यह http://css-tricks.com/centering-in-the-unknown/ पर लंबवत केंद्रित करने के लिए मेरी आवश्यकताओं को पूरा करता है। यानी 8 + और आधुनिक ब्राउज़रों का समर्थन करता है

स्रोत

2012-08-30 08:49:09 jubalm

1

मुझे लगता है कि आप लंबवत और क्षैतिज केंद्र को संरेखित करने के लिए एक div चाहते हैं, सभी ब्राउज़रों में गतिशील ऊंचाई और चौड़ाई है।

jSfiddle

एचटीएमएल

<div class="main"> 
    <div class="contentWrapper"> 
     <div class="content">My Content </br> Goes here</div> 
    </div>   
</div>

सीएसएस

.main { 
    border: 1px solid #f00; 
    height: 400px; 
    width: 400px; 
    position: relative 
} 
.contentWrapper { 
    display: table; 
    width: 100%; 
    height: 100%; 
    *height: auto; 
    *position: absolute; 
    *top: 50%; 
} 
.content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    *position: relative; 
    *top: -50%; 
}

स्रोत

2012-11-22 09:06:19 Tarun

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

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