CSS kodėl lygiuoja pagal pradinę eilutę migtuką?

Sveiki, numečiau ss kas blogai, jei elementas sudarytas iš 2 eilučių mygtuką permeta ir sulygiuoja pagal prieš tai buvusį elemento pirmą eilutę, įsitikinęs, kad čia žiauriai easy, nu be padėkit kas :)

http://prntscr.com/epl6ws

Neaišku css kažkoks, kam tas margin-top: auto? Neįmanoma ką nors pasakyti vien tik į tą screena žiūrint. Ten gali būti net koks line-height...Duok tiesiog linką.

imber lt

Pas tave šiaip pats markup'as blogas, darai col-md-4 kuris neturi row, ten kur <!-- Block search module TOP --> vietoj col-md-4 sukurk kokį div pvz .buttons ir duok jam display: flex

Kiek teko girdėt, tai margin-top: auto įmanomas nebent jei parent elementas yra flex. Kitu atveju vertikalų centrą išgauti, kaip ir neįmanoma (bent buvo). Nžn, per daug į CSS neįsigilinęs, bet bandyčiau pradžioj duoti - top: 0, bottom: 0, right: 0, left: 0; ir !important jei neveikia :)

Kiek teko girdėt, tai margin-top: auto įmanomas nebent jei parent elementas yra flex. Kitu atveju vertikalų centrą išgauti, kaip ir neįmanoma (bent buvo). Nžn, per daug į CSS neįsigilinęs, bet bandyčiau pradžioj duoti - top: 0, bottom: 0, right: 0, left: 0; ir !important jei neveikia :)

0 efekto tai duos nes tas elementas nėra absoliučiai pozicionuotas.

jau parašiau sprendimą, viršuje, naudok flexbox ir viskas, tam jis ir skirtas.

Pas tave šiaip pats markup'as blogas, darai col-md-4 kuris neturi row, ten kur <!-- Block search module TOP --> vietoj col-md-4 sukurk kokį div pvz .buttons ir duok jam display: flex

jei sukursiu kitą klasę kaip tu sakai, man paieška nueis nahrien, gi bootsrapas naudojamas :) row yra ir jis skaidomas į tris stulpelius, tai yra row=12 md4+md4+m4=12

PS. AČIŪ. pridėjau display flex į col-md-4 ir gavau efektą :)

jei sukursiu kitą klasę kaip tu sakai, man paieška nueis nahrien, gi bootsrapas naudojamas :)

Tai kad blogai jį panaudoji. Tavo markupas ten turi būti toks maždaug:

<div class="nav">
<div class="nav-left">
	<button type="button">Link 1</button>
	<button type="button">Link 2</button>
	<button type="button">Link 3</button>
</div>
<div class="nav-middle">
	<input type="text" name="s">
</div>
<div class="nav-right">
	<button type="button">Link 1</button>
	<button type="button">Link 2</button>
	<button type="button">Link 3</button>
</div>
</div>

<style>
.nav {
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 80px;
}
.nav > div {
	display: flex;
	align-items: center;
}
</style>

Nekopipastink aisku. Tau ten bootstrao nereikia, nebent naudoji 4 versija kur gridas eina kaip flex.