यहां एक माता-पिता के अंदर , क्षैतिज और लंबवत रूप से एक ही समय में इनलाइन तत्वों को संरेखित करने की तकनीक है :
लंबवत संरेखण
1) इस दृष्टिकोण में, हम माता-पिताinline-block के पहले (या अंतिम) बच्चे के रूप में एक (छद्म-) तत्व बनाते हैं , और अपनी संपत्ति को अपने माता-पिता की सभी ऊंचाई लेने के लिए निर्धारित करते हैं ।height100%
2) इसके अलावा, जोड़ने vertical-align: middleसे लाइन अंतरिक्ष के बीच में इनलाइन (-ब्लॉक) तत्व रहते हैं। तो, हम उस सीएसएस घोषणा को पहले बच्चे और हमारे तत्व ( छवि ) दोनों में जोड़ते हैं ।
3) अंत में, इनलाइन (-ब्लॉक) तत्वों के बीच सफेद अंतरिक्ष वर्ण को हटाने के लिए , हम अभिभावक के फ़ॉन्ट आकार को शून्य से सेट कर सकते हैं font-size: 0;।
नोट: मैंने निम्नलिखित में निकोलस गैलाघर की छवि प्रतिस्थापन तकनीक का उपयोग किया ।
क्या लाभ हैं?
- कंटेनर ( माता-पिता ) में गतिशील आयाम हो सकते हैं।
छवि तत्व के आयामों को स्पष्ट रूप से निर्दिष्ट करने की कोई आवश्यकता नहीं है।
हम इस दृष्टिकोण का उपयोग आसानी से एक <div>तत्व को लंबवत रूप से संरेखित करने के लिए कर सकते हैं ; जिसमें एक गतिशील सामग्री (ऊंचाई और / या चौड़ाई) हो सकती है। लेकिन ध्यान दें कि आपको अंदर के पाठ को प्रदर्शित करने font-sizeके divलिए संपत्ति को फिर से सेट करना होगा । ऑनलाइन डेमो ।
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
उत्पादन
उत्तरदायी कंटेनर
यह खंड प्रश्न का उत्तर देने वाला नहीं है क्योंकि ओपी पहले से ही जानता है कि एक उत्तरदायी कंटेनर कैसे बनाया जाए। हालाँकि, मैं समझाता हूँ कि यह कैसे काम करता है।
कंटेनर तत्व की ऊँचाई को उसकी चौड़ाई (पहलू अनुपात का सम्मान करते हुए) में परिवर्तन करने के लिए, हम शीर्ष या निचले paddingगुण के लिए प्रतिशत मान का उपयोग कर सकते हैं।
शीर्ष / निचले पैडिंग या मार्जिन पर एक प्रतिशत मान युक्त ब्लॉक की चौड़ाई के सापेक्ष है।
उदाहरण के लिए:
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
यहाँ ऑनलाइन डेमो है । नीचे से लाइनों को टिप्पणी करें और प्रभाव को देखने के लिए पैनल का आकार बदलें।
इसके अलावा, हम paddingएक ही परिणाम प्राप्त करने के लिए एक डमी बच्चे या :before/ :afterछद्म तत्व के लिए संपत्ति को लागू कर सकते हैं । लेकिन ध्यान दें कि इस मामले में, प्रतिशत मान स्वयं paddingकी चौड़ाई के सापेक्ष .responsive-containerहै।
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
डेमो # 1 ।
डेमो # 2 ( :afterछद्म तत्व का उपयोग करके )
सामग्री जोड़ना
padding-topसंपत्ति का उपयोग कंटेनर के अंदर, सामग्री के ऊपर या नीचे एक विशाल स्थान का कारण बनता है ।
आदेश है कि ठीक करने के लिए, हम एक आवरण तत्व द्वारा सामग्री लपेट, का उपयोग करके दस्तावेज़ सामान्य प्रवाह से वह तत्व निकाल राशि पूर्ण स्थिति , और अंत में आवरण का विस्तार (बू का उपयोग कर top, right, bottomऔर leftगुण) अपनी मूल के पूरे स्थान को भरने के, कंटेनर ।
ये रहा:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
यहाँ ऑनलाइन डेमो है ।
सभी का साथ मिल रहा है
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
यहाँ काम कर रहा डेमो है ।
जाहिर है, आप ब्राउज़र संगतता के::before लिए छद्म तत्व का उपयोग करने से बच सकते हैं , और पहले बच्चे के रूप में एक तत्व बना सकते हैं :.img-container
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
अद्यतन डेमो ।
max-*गुणों का उपयोग करना
कम चौड़ाई में बॉक्स के अंदर छवि रखने के लिए, आप छवि पर सेट max-heightऔर max-widthसंपत्ति कर सकते हैं:
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
यहाँ अद्यतन DEMO है ।