मैंने इस फ्लेक्सबॉक्स टेबल को इस तरह बनाया है:

<div class="flex-row">
        <div class="flex-col">
            <i class="thumbs-up"></i>                                            
             <i>20</i>
        </div>
        <div class="flex-col">
            <i class="thumbs-down"></i>                                         
            <i>5</i>
        </div>
</div>

एससीएसएस:

.thumbs-up {
  width: 24px;
  height: 24px;
  &:after {
    content: " ";
    background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-up.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
  }
}

.thumbs-down {
  width: 24px;
  height: 24px;
  &:after {
    content: " ";
    background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-down.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
  }
}


.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 20%;

}

.flex-col {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    text-align: center;

    i {
        text-align: left;
    }

}

यह रहा jsfiddle

जैसा कि आप देख सकते हैं कि संख्याएँ चिह्नों के नीचे बिल्कुल केंद्र-संरेखित नहीं हैं।

मैं इसे कैसे ठीक करूं?

1
Karlom 9 अक्टूबर 2019, 19:41

1 उत्तर

सबसे बढ़िया उत्तर

आपके नंबरों के केंद्र-संरेखित न होने का कारण यह है कि:

  1. i तत्वों में .flex-col की शैली text-align: left लागू है।
  2. i तत्वों की चौड़ाई सेट नहीं है, इसलिए मूल तत्व चौड़ाई (.flex-col) का 100% हिस्सा लें।

इसलिए यदि आपने पाठ को केंद्र में संरेखित किया होता, तो वह स्तंभ के मध्य में, आइकन से दूर होता। मैंने समस्या को समझाने और समझाने के लिए this fiddle पर तत्वों में कुछ डिबगिंग बॉर्डर जोड़े हैं।

इसे ठीक करने के लिए मैंने i एलिमेंट में एक चौड़ाई जोड़ी है जिसमें संख्याएं हैं example fiddle solution ए>

एक वैकल्पिक समाधान .flex-col तत्वों पर margin: right सेट करना होगा, flex-basis और flex शैली नियमों को हटा देना। फिर text-align: center को ऊपर बताए अनुसार i एलिमेंट पर सेट करें। वैकल्पिक उदाहरण देखें

1
Frank Furter 9 अक्टूबर 2019, 20:07