मध्यम (लंबवत)

में पाठ को संरेखित कैसे करें मैं अब कई घंटों से संघर्ष कर रहा हूं और फिर भी मुझे कोई समाधान नहीं मिल रहा है। मैंने यह अच्छा ग्रिड बनाया है जो पाठ की लंबाई और ब्राउज़र के आकार के साथ समायोजित करता है। समस्या यह है कि मैं बॉक्स के बीच में पाठ नहीं ले सकता।मध्यम (लंबवत)

मैंने सब कुछ करने की कोशिश की है .. मैंने इसे प्राप्त करने के लिए कई गुणों का उपयोग किया लेकिन कुछ भी काम नहीं किया।

text-align: center; 
vertical-align: middle; 
line-height: "same as div";

सीएसएस कोड:

मार्जिन:

.parent { 
    text-align:center; 
    margin:0px; 
    width:100%; 
    padding:0px; 
    font-size:18px; 
    color:#000; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
     justify-content: space-between; 
} 

.child { 
    padding:18px 25px; 
    background: rgba(0, 0, 0, .5); 
    list-style-type:none; 
    width:inherit; 
    margin:5px; 

}

स्रोत

2015-12-17 justme

त्वरित और सरल: फ्लेक्सबॉक्स के साथ लंबवत केंद्र - http://stackoverflow.com/a/33049198/3597276 –

क्या आप यह चाहते हैं?

.parent { 
 
    text-align:center; 
 
    margin:0px; 
 
    width:100%; 
 
    padding:0px; 
 
    font-size:18px; 
 
    color:#000; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    vertical-align: middle; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 

 
} 
 

 
.child { 
 
    position: relative; 
 
    background: rgba(0, 0, 0, .5); 
 
    padding:10px; 
 
    list-style-type:none; 
 
    width:inherit; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height:inherit; 
 
    display: inline-flex; 
 
    vertical-align: middle; 
 
    margin:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="parent"> 
 
    <div class="child"><span>sometext</span></div> 
 
    <div class="child">somemoretext somemoretext</div> 
 
    <div class="child">sometext</div> 
 
    <div class="child">sometext</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child">somemoretext somemoretext somemoretext somemoretext</div> 
 
    <div class="child">sometext</div> 
 
</div> 
 
</body> 
 
</html>

इस उर jsfiddle के रूप में फ्लेक्स के साथ किया जाता है। आप "फ्लेक्स डिस्प्ले टेबल और लंबवत संरेखण मध्य" और "बाल डिस्प्ले टेबल सेल और वैन बीच" के साथ अपने फ्लेक्स शैलियों को हटाकर भी आसान कर सकते हैं।

स्रोत

2015-12-18 00:24:06 Vinc

बहुत अच्छा लगता है !! क्या मैं पूछ सकता हूं कि यह ज्यादातर ब्राउज़रों में काम करेगा या नहीं? :) आपके इनपुट के लिए बहुत बहुत धन्यवाद :) – justme

आप सीएसएस संगतता के लिए [यहां] (http://caniuse.com/#search=flex) देख सकते हैं! मेरी राय है कि कई फ्लेक्स कई ब्राउज़रों और ढांचे पर समर्थित है और मुझे लगता है कि इसका उपयोग सुरक्षित है .. आपका बाकी सीएसएस ठीक लगता है। – Vinc

धन्यवाद :) एक अच्छा दिन है – justme

आप की कोशिश की है 0 ऑटो;

स्रोत

2015-12-17 23:56:19 leham789

हाँ लेकिन यह सबकुछ खराब हो गया! – justme

क्या आप अपना संरेखण के लिए एचटीएमएल पोस्ट कर सकते हैं ताकि मैं अपने लिए कोशिश कर सकूं? – leham789

यहां आप हैं: http://codepen.io/mariomez/pen/jWqBOv – justme

यदि आपको परवाह नहीं है कि टेक्स्ट की कई पंक्तियों के साथ divs वास्तविक टेक्स्ट सामग्री पर अपनी ऊंचाई समायोजित करते हैं, तो तत्वों पर height:100% का उपयोग करें।

आप एक ही ऊंचाई रहने के लिए अपने सभी सामग्री की जरूरत है, जोड़ने

// Use any fixed value 
    line-height: 50px; 
    height: 50px;

आप पिक्सल में अपनी निश्चित ऊंचाई बदलने के लिए whenver अपने विंडो का आकार बदलने पर की जरूरत है, बस जावास्क्रिप्ट का उपयोग CSS नियम बदलने के लिए (यदि इस विधि का उपयोग करते हुए this पहले विंडो बदलते समय अपने क्लाइंट को धीमा न करने के लिए पढ़ें)।

स्रोत

2015-12-18 00:16:49

मध्यम (लंबवत)

उत्तर

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