सीएसएस लंबवत संरेखण

मेरे पास फ्लोटेड div में एक आईएमजी है और मुझे नहीं पता कि इसे लंबवत कैसे केंद्रित किया जाए।सीएसएस लंबवत संरेखण

<div style="height: 300px"> 
    <img style="height: 50px" src="something" /> 
</div>

लंबवत-संरेखण: पाठ्यक्रम का मध्य काम नहीं करता है।

http://jsfiddle.net/wKQYj/

स्रोत

2011-01-24 anonymous

इस आलेख के दो तरीकों से पहले से ही अलग उत्तरों के रूप में दिए गए हैं, लेकिन यदि आप जानते थे कि 'लंबवत-संरेखण' वास्तव में किस लिए उपयोग किया गया था: http://phrogz.net/css/लंबवत-संरेखण/ – scragz

@scragz - यह एक अच्छा लिंक है। हालांकि, मैं 'डिस्प्ले: टेबल-सेल' का उपयोग नहीं करता। बेशक, मैं '

'के प्रस्तावित उत्तर का उपयोग नहीं करता। हा। – Jason

https://pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg – walv

उत्तर

एक माता पिता के तत्व के अंदर खड़ी पंक्ति पाठ करने के लिए

, और भालू मन में है कि एक img एक इनलाइन है तत्व और इतने इसी तरह पाठ में बर्ताव करता है, तो आप बस सेट कर सकते हैं line-height पेरेंट तत्व की height रहे हैं:

div { 
    height: 300px; 
    line-height: 300px; 
}

JS Fiddle demo।

स्रोत

2011-01-24 18:56:31

vertical-align संपत्ति केवल td तत्वों पर सही मायने में अच्छा है। की तरह कुछ का प्रयास करें:

<table> 
<tr> 
    <td style='height:300px; vertical-align:center'> 
    <img src='something'> 
    </td> 
</tr> 
</table>

या जब से तुम ऊंचाई और चौड़ाई img के बारे में पता:

<div style='height:300px;'> 
<img style='height:50px; position:relative; top:50%; margin-top:-25px'> 
</div>

स्रोत

2011-01-24 18:53:47 Jason

ज़ोमग, उपरोक्त में से कोई भी मेरे लिए ठीक नहीं लगता है, मेरा मतलब है कि सीएसएस में गंभीर छेद है, वे छाया विकसित कर रहे हैं आदि और हमें अभी भी टेबल का उपयोग करना होगा या divs में divs लंबवत केंद्र में ... पवित्र गाय। मुझे divs का उपयोग करना है। और मैं दूसरे कोड का उपयोग नहीं कर सकता क्योंकि div ऊंचाई उपयोगकर्ताओं द्वारा बदला जाएगा। तो मैं खो गया हूँ। – anonymous

@anonymous: क्या आप जावास्क्रिप्ट, या किसी भी जेएस पुस्तकालयों (MooTools, Scriptaculous, jQuery, चमक ...) का उपयोग करने में सक्षम हैं? –

vertical-align सीएसएस शैली टेक्स्ट की संरेखण को अपनी टेक्स्ट पंक्ति में निर्दिष्ट करती है। यह आपको पाठ के लिए सुपरस्क्रिप्ट या सबस्क्रिप्ट के रूप में निर्दिष्ट करने की अनुमति देता है, उदाहरण के लिए।

तो यह वास्तव में एक बॉक्स के भीतर एक तत्व को लंबवत रूप से संरेखित करने का इरादा नहीं है।

इस का सुस्पष्ट अपवाद नहीं है, तथापि - तालिका सेल (यानी <td> और <th> तत्वों) vertical-align शैली वास्तव में ऐसा करने के लिए उपयोग करें: कोशिका के भीतर कक्ष की सामग्री संरेखित करें।

यह अपवाद एक quirk का कुछ है - यह वास्तव में मौजूद नहीं होना चाहिए। सीएसएस डिजाइनरों ने इसे सीएसएस को टेबल तत्वों की valign विशेषता को पुन: पेश करने की अनुमति देने के लिए वहां रखा है, जिसे आम तौर पर तालिका-आधारित लेआउट के अंधेरे पुराने दिनों में डिजाइनरों द्वारा उपयोग किया जाता था।

अन्य तत्वों के लिए, इसके बीच में लंबवत बॉक्स की सामग्री को संरेखित करना एक अच्छी कला का थोड़ा सा हो सकता है। वहाँ कई तकनीकें हैं:

पाठ की एकल लाइनों के लिए, बस line-height पूरे बॉक्स की ऊंचाई के रूप में ही हैं। इसके लिए आपको शायद vertical-align की आवश्यकता नहीं होगी।
तत्व तालिका तालिका अनुकरण करने के लिए display:table-cell; का उपयोग करें, और फिर vertical-align का उपयोग करें। यह काम करता है, लेकिन अनपेक्षित परिणाम हो सकते हैं (तालिका कक्षों के अन्य गुण हैं जिन्हें आप अनुकरण नहीं करना चाहते हैं)।
आप तत्व आप लंबवत संरेखित करना चाहते हैं की ऊंचाई पता है, तो आप इसे 50% शून्य से आधा उसकी ऊंचाई करने के लिए, रख सकते हैं इस तरह:
```
position:absolute; 
top:50%; 
height:200px; 
margin-top:-100px; /* half the height */ 
```

वहाँ कुछ और हैं, लेकिन इन्हें आपको शुरू करना चाहिए।

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

स्रोत

2011-01-24 19:06:49 Spudley

जावास्क्रिप्ट शायद हर मामले के लिए लंबवत केंद्र में केंद्रित छवि प्राप्त करने के लिए सबसे अच्छा होगा। यदि आप jQuery जैसी लाइब्रेरी का उपयोग कर सकते हैं तो यह कोड की कुछ पंक्तियां हैं।

$(function(){ 
    var containerHeight = $('#container').outerHeight(); 
    var imgHeight = $('#logo img').outerHeight(); 

    var difference = (containerHeight - imgHeight)/2; 
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

});

स्रोत

2011-01-24 19:12:23 heymrcarter

तो उसे पूर्ण jQuery लाइब्रेरी, साथ ही इस स्क्रिप्ट को शामिल करने की आवश्यकता है? बस कुछ केंद्र करने के लिए थोड़ा overkill लगता है। – Jason

अगर उसे कुछ समय से अधिक कुछ केंद्र केंद्रित करना है और यदि उसे पता नहीं है ए) माता-पिता div की ऊंचाई क्या है, और बी) छवि की ऊंचाई क्या है, यह हर बार काम करेगा, और प्रत्येक में मामला – heymrcarter

अधिक आधुनिक (IE8 +) समाधान के लिए जो टेबल का उपयोग नहीं करता है, मुझे this one सबसे अच्छा लगता है।

<style> 
/* Can be any width and height */ 
.block { 
    height:500px; 
    text-align: center; 
} 

/* The ghost, nudged to maintain perfect centering */ 
.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

/* The element to be centered, can be any width or height */ 
.centered { 
    display: inline-block; 
    vertical-align: middle; 
    width: 300px; 
} 
</style> 

<div class="block"><div class="centered">Centered Content</div></div>

स्रोत

2013-03-08 22:38:07 Justin

वास्तव में सबसे अच्छा समाधान, क्योंकि इसे सामग्री की ऊंचाई जानने की आवश्यकता नहीं है और तालिका-सेल सीएसएस का उपयोग नहीं करता है। साझा करने के लिए धन्यवाद! – Sygmoral

+1 चालाक चाल! यह स्वीकार्य उत्तर आईएमओ होना चाहिए। – Passerby

होने के दौरान ऐसा करने का कोई तरीका है। प्रतिशत प्रतिशत चौड़ाई (जो वास्तव में 100% हो सकती है)। –

सुंदर cool and modern approach (ऊंचाई के साथ निर्दिष्ट):

.Absolute-Center { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

स्रोत

2013-09-08 22:45:11 Agat

मैं प्रदर्शन उपयोग कर रहा हूँ: बॉक्स संपत्ति: verical align js-fiddle

स्रोत

2014-11-03 10:13:38 Ruwen

#container { 
    display: box; 
    box-orient: vertical; 
    box-pack: center; 
} 

#text { 
    vertical-align: middle; 
}

js-बेला यहाँ देखें

अनुवाद संपत्ति का उपयोग करें, यह आसान है और आईई में भी काम करता है:

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

स्रोत

2015-02-05 22:50:09 yulie

बहुत अच्छा और छोटा रास्ता! धन्यवाद! –

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