क्यों संरेखित करता है: पूर्ण ओवरले: माता-पिता अप गड़बड़ मेरी स्थिति में केंद्र?

वोट
0

किसी को समझा सकते हैं क्यों का उपयोग कर display: flex; align: center;इस मेनू के माता पिता में एक बच्चे तत्व में दो बिल्कुल तैनात ओवरले को खराब करता?

यहाँ एक बेला जहां के साथ और बिना यह कोशिश कर सकते हैं align: centerमेरी अर्थ मिलता है। (टिप्पणी हटाएं / * संरेखण: केंद्र; * / .menu में)

https://jsfiddle.net/Hastig/wmtr87gc/

body { background-color: gray;}
.menu {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    padding: 5px 0;
    background-color: hsl(0, 0%, 30%);
}
.menu-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 13px;
  color: hsl(0, 0%, 70%);
}
.menu-item.progress {
  background-color: gray;
}
.progress-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 83%;
  background-color: hsla(191, 58%, 46%, 1);
}
.progress-value {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: hsl(0, 0%, 90%);
}
<div class=menu>
  <div class=menu-item>Stuff</div>
  <div class=menu-item progress>
    <div class=progress-bar></div>
    <div class=progress-value>83</div>
  </div>
  <div class=menu-item>Things</div>
</div>

02/09/2018 को 05:45
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
1

क्योंकि मध्य तत्व केवल पूर्ण तत्व शामिल हैं इसलिए कोई में प्रवाह सामग्री इसके अंदर अपनी ऊंचाई को परिभाषित करने के लिए है। तब डिफ़ॉल्ट align-itemsहै खिंचाव तो अपने तत्व डिफ़ॉल्ट रूप से फैला हो जाएगी और इसकी ऊंचाई अपनी मूल ऊंचाई के बराबर हो जाएगा, लेकिन अगर आप संरेखण बदलने तत्व ऊंचाई को परिभाषित करने के लिए अपनी सामग्री पर विचार करेंगे और वहाँ के बाद से कोई में प्रवाह तत्व यह होगा height:0जिसका अर्थ है कि प्रगति बार द्वारा परिभाषित top:0;bottom:0भी ऊंचाई होगा 0

इससे बचने के लिए, positoned नहीं तत्व (एक है कि पाठ हो) ताकि मध्य तत्व है कुछ में प्रवाह सामग्री और इसकी ऊंचाई से अलग होगा कम से कम एक रखने 0whataver संरेखण किया जाएगा।

body {
  background-color: gray;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 5px 0;
  background-color: hsl(0, 0%, 30%);
}

.menu-item {
  position: relative;
  z-index:0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 13px;
  color: hsl(0, 0%, 70%);
}

.menu-item.progress {
  background-color: gray;
}

.progress-bar {
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 83%;
  background-color: hsla(191, 58%, 46%, 1);
}

.progress-value {
  color: hsl(0, 0%, 90%);
}
<div class="menu">
  <div class="menu-item">Stuff</div>
  <div class="menu-item progress">
    <div class="progress-bar"></div>
    <div class="progress-value">83</div>
  </div>
  <div class="menu-item">Things</div>
</div>

02/09/2018 को 09:10
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more