अंदर तत्वों .track-containerहैं इनलाइन स्तर के एक ही में बॉक्स लाइन बॉक्स ।
इसलिए, उनके ऊर्ध्वाधर संरेखण vertical-alignसंपत्ति द्वारा निर्दिष्ट किया जाता है:
यह संपत्ति एक इनलाइन-स्तरीय तत्व द्वारा उत्पन्न बक्से के एक पंक्ति बॉक्स के अंदर ऊर्ध्वाधर स्थिति को प्रभावित करती है।
डिफ़ॉल्ट रूप से, इसका मूल्य है baseline:
मूल बॉक्स के आधार रेखा के साथ बॉक्स की आधार रेखा संरेखित करें। यदि बॉक्स में आधार रेखा नहीं है, तो माता-पिता की आधार रेखा के साथ नीचे मार्जिन किनारे को संरेखित करें।
इस मामले में, वे सभी आधारभूत हैं, जिनकी गणना के अनुसार की जाती है
एक 'इनलाइन-ब्लॉक' की आधार रेखा सामान्य प्रवाह में उसके अंतिम लाइन बॉक्स की आधार रेखा होती है, जब तक कि इसमें कोई प्रवाह लाइन बॉक्स न हो या यदि इसकी 'अतिप्रवाह' संपत्ति में 'दृश्यमान' के अलावा अन्य एक संगणित मूल्य हो, बेसलाइन किस मामले में सबसे नीचे का किनारा है।
निम्नलिखित छवि स्पष्ट करती है कि क्या हो रहा है (लाल रेखा आधार रेखा है):
इसलिए, आप कर सकते हैं
तत्वों के ऊर्ध्वाधर संरेखण को बदलें, जैसे top, middleयाbottom
.track-container > * {
vertical-align: middle;
}
.track-container {
padding: 0;
width: 600px;
height: 200px;
border: 1px solid black;
list-style-type: none;
margin-bottom: 10px;
}
.position-data {
overflow: none;
display: inline-block;
width: 12.5%;
height: 200px;
margin: 0;
padding: 0;
border: 1px solid black;
}
.current-position,
.position-movement {
height: 100px;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
.album-artwork {
display: inline-block;
height: 200px;
width: 20%;
border: 1px solid black;
}
.track-info {
display: inline-block;
padding-left: 10px;
height: 200px;
border: 1px solid black;
}
.track-container > * {
vertical-align: middle;
}
<div class="track-container">
<div class="position-data">
<div class="current-position">1</div>
<div class="position-movement">2</div>
</div>
<div class="album-artwork">fdasfdsa</div>
<div class="track-info">fdafdsa</div>
</div>
overflowतत्वों को कुछ अलग से सेट करें visible, जैसे कि hiddenया auto, ताकि उनका आधार रेखा उनके नीचे का मार्जिन किनारे हो।
.track-container > * {
overflow: hidden;
}
.track-container {
padding: 0;
width: 600px;
height: 200px;
border: 1px solid black;
list-style-type: none;
margin-bottom: 10px;
}
.position-data {
overflow: none;
display: inline-block;
width: 12.5%;
height: 200px;
margin: 0;
padding: 0;
border: 1px solid black;
}
.current-position,
.position-movement {
height: 100px;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
.album-artwork {
display: inline-block;
height: 200px;
width: 20%;
border: 1px solid black;
}
.track-info {
display: inline-block;
padding-left: 10px;
height: 200px;
border: 1px solid black;
}
.track-container > * {
overflow: hidden;
}
<div class="track-container">
<div class="position-data">
<div class="current-position">1</div>
<div class="position-movement">2</div>
</div>
<div class="album-artwork">fdasfdsa</div>
<div class="track-info">fdafdsa</div>
</div>
सुनिश्चित करें कि तत्वों में कोई प्रवाह लाइन बॉक्स नहीं है, ताकि उनकी आधार रेखा उनके नीचे मार्जिन किनारे हो। यही है, सामग्री प्रवाह से बाहर होनी चाहिए :
एक तत्व प्रवाह से बाहर कहा जाता है अगर यह फ्लोट किया जाता है, बिल्कुल तैनात है, या मूल तत्व है। एक तत्व को प्रवाह में कहा जाता है यदि यह प्रवाह से बाहर नहीं है।
तो उदाहरण के लिए, आप एक आवरण में तत्वों की सामग्री रख सकते हैं, और इसे इसके साथ स्टाइल कर सकते हैं float: left:
.track-container > * > .wrapper {
float: left;
}
.track-container {
padding: 0;
width: 600px;
height: 200px;
border: 1px solid black;
list-style-type: none;
margin-bottom: 10px;
}
.position-data {
overflow: none;
display: inline-block;
width: 12.5%;
height: 200px;
margin: 0;
padding: 0;
border: 1px solid black;
}
.current-position,
.position-movement {
height: 100px;
width: 100%;
margin: 0;
padding: 0;
border: 1px solid black;
}
.album-artwork {
display: inline-block;
height: 200px;
width: 20%;
border: 1px solid black;
}
.track-info {
display: inline-block;
padding-left: 10px;
height: 200px;
border: 1px solid black;
}
.track-container > * > .wrapper {
float: left;
}
<div class="track-container">
<div class="position-data">
<div class="current-position wrapper">1</div>
<div class="position-movement wrapper">2</div>
</div>
<div class="album-artwork">
<span class="wrapper">fdasfdsa</span>
</div>
<div class="track-info">
<span class="wrapper">fdafdsa</span>
</div>
</div>