एक div

Question

के अंदर लंबवत केंद्र इनपुट I input फ़ील्ड लंबवत रूप से प्रत्येक div viz के अंदर केंद्रित होना चाहता है। color-1color-2color-3
प्रत्येक div या input में vertical-align: middle का उपयोग कर काम नहीं कर रहा है।

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
input[type="text"] { 
 
    width:150px; 
 
    height: 30px; 
 
    text-align: center; 
 
} 
 

 
#color-1 { 
 

 
    height: 33%; 
 
    background: {{yourName}}; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
#color-2{ 
 
    height: 33%; 
 
    background: {{color_2}}; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
#color-3{ 
 
    height: 33%; 
 
    background: {{color_3}}; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 

 
<div id="color-1"> 
 
    <input type="text" ng-model="color_1" placeholder="Enter Color #1"> 
 
    <h1>{{color_1}}</h1> 
 
</div> 
 

 
<div id="color-2"> 
 
    <input type="text" ng-model="color_2" placeholder="Enter Color #2"> 
 
    <h1>{{color_2}}</h1> 
 
</div> 
 

 
<div id="color-3"> 
 
    <input type="text" ng-model="color_3" placeholder="Enter Color #3"> 
 
    <h1>{{color_3}}</h1> 
 
</div>

Answer 1

आप इसे display:flex का उपयोग करके या display:table,display:table-row and display:table-cell का उपयोग करके दो तरीकों से कर सकते हैं, जिसे आपको किसी अन्य div में लपेटने की आवश्यकता है।

का उपयोग करते हुए प्रदर्शन: फ्लेक्स बेहतर है जिसमें आप एक और div में टेम्पलेट रैप करने के लिए कोई जरूरत नहीं

वर्ग color सभी रंग divs के लिए 'रंग' वर्ग के

शैली जोड़ें

.color{ 
    height:33%; 
    display: flex; 
    justify-content: center; 
    align-items:center; 
} 

अधिक जानकारी के लिए यह देखें https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

मैं demo

#color-1 
{ 
    height: 33%; 
    background: {{yourName}}; 
    vertical-align: top; 
    background: red; 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 

} 

कर दिया था और बनाने divs

align = "center"