2015-07-29 24 views
5

Her divanda ortada merkezlenmiş input alanlarına sahip olmak istiyorum. vertical-align: middle ya her div veya input kullanma color-1color-2color-3
çalışmıyor.Bir div içinde dikey olarak orta giriş

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>

+0

bunu anlamak için bir jsfiddle yapın, böylece kolay anlaşılır –

+0

http: // stackover flow.com/questions/4466596/css-how-to-align-vertically-a-label-and-input-inside-a-div – trainoasis

cevap

7

Bunu, display:flex veya display:table,display:table-row and display:table-cell kullanarak iki şekilde yapabilirsiniz, başka bir bölüme sarmanız gerekir. Ekran Kullanımı

: esnekliğini hangi başka div şablonu sarmak gerek

tüm renk div için 'renk' sınıfının

Stil sınıfı color ekle iyidir

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

Daha fazla bilgi için, bu

+0

Teşekkürler! İşe yarıyor :) –

0

Ben

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

} 

demo yaptı ve yapmak vardı div'ler

align = "center"

+0

Yatay hizalamayı kaybediyorum :( –

+0

Güncellenmiş cevabımı kontrol et. https://jsfiddle.net/xwvq4chj/4/ –

+0

Neyi güncellediğinizi anlatabilir misiniz? –

İlgili konular