लंबवत-संरेखण मेरे क्षेत्रों को डीआईवी के शीर्ष पर नहीं ला रहा है - एचटीएमएल, सीएसएस, संरेखण, लंबवत-संरेखण

मैं खोज क्षेत्रों को संरेखित करने का प्रयास कर रहा हूं। मेरे सभी तत्व एक मूल कंटेनर के भीतर हैं, जिसकी शैली है

#statSearchFields {
vertical-align: top;
font-size: 90%;
}

तत्व स्वयं जैसे दिखते हैं

<div class="searchField">
Start Date<br>
<input type="text" name="start_date" id="start_date" value="06/28/2014" placeholder="Start Date" class="datepicker hasDatepicker">
</div>

लेकिन जब मैं उन्हें अपने कंटेनर में डालता हूं, तो वे ऑफ-सेंटर दिखाई देते हैं। यहाँ उदाहरण fiddle है - https://jsfiddle.net/n73ao02h/1/ । मैं सब कुछ संरेखण में कैसे लाऊं?

उत्तर:

आपको जोड़ना है vertical-align: top; को .searchField चयनकर्ता।

अपडेटेड jsfiddle: https://jsfiddle.net/n73ao02h/2/

vertical-align: top isn "t आपके आईडी से विरासत में मिला है। अपने सीएसएस में निम्नलिखित जोड़ें और आपके पास वे परिणाम होंगे जिनकी आप अपेक्षा करेंगे।

.searchField {
display: inline-block;
vertical-align:top;
}

नोट: आपको हटाना चाहिए vertical-align अपनी संपत्ति #statSearchFields आईडी।