html - Display Flex align the Text Vertically Top and image to Center -
i trying flex layout image needs align center not text.
currently have 2 flex box first box both text , second 1 text , image when align items both aligning center need image align center not text.
flex-container { border: 1px solid; display: flex; align-items: center; } .flex-item { flex: 1 auto; border: 1px solid green; height: 100%; display: flex; justify-content: center; } .flex-center { align-items: center; }<div class="flex-container"> <div class="flex-item">i'm top dog! </div> <div class="flex-item flex-center"> want vertically centered! , am! </div> </div> <div class="flex-container"> <div class="flex-item">i'm top dog!previous. next. image scented lolly dude small hardtop pencil case smiggle ... tall pencil pack x24 2 $20 tall pencil pack x24 $12.95 aud. previous. next. image scented lolly dude small hardtop pencil case smiggle ... tall pencil pack x24 2 $20 tall pencil pack x24 $12.95 aud. </div> <div class="flex-item flex-center"> <img src="data:image/jpeg;base64,/9j/4aaqskzjrgabaqaaaqabaad/2wceaakgbxisehutehmvfruxfhczfxgxfroyfxoyfxcygbcyfxcyhygggbolhrgyitehjykrli4ugb8zodmtnygtlisbcgokdg0oghaqgi0lhyuvls0tls0vkystls0tky0uls0tls0tls0tls0tlssyly0tlturls0rli0tls0tls0tlf/aabeianaa0ambigaceqedeqh/xaacaaacawebaqeaaaaaaaaaaaadbaacbqybbwj/xabjeaacaqiebaqcbqkdcwqdaaabaheaawqsitefqvfheyjxgtkrblkhscehfbujqmks0fbyguewm0njc5sistlt8vsds8jfu1x/xaaxaqebaqeaaaaaaaaaaaaaaaaaaqid/8qajreaagicawacagidaaaaaaaaaaecerihazfbe1eiyxhhi4hw/9oadambaairaxeapwd7juqvkalsvcadimzbtwbjqkmbmylj6cd6apurp4pxmxh1m9cvdjifmfrrqaxcd+uda3gyl2th/woub99qloqi3ti6qpqbwjrhksrdqccpmkirtqkpc1svjr2gjuqtuocvklsgjuqtuocvklsgjuqv5nae1k8jppfcwsw/85etp/adr95ob2pxl3vyh8luwcbzns0/ak6hcytlqc5bzxrhiztii7eulqepuquispuqubx/5qsjjl62bweuc0s5z38rkmknfgqszjj5fdxnyf6i8sls78qtlzbnofso1wqjakkzxarj3o+gr6bxrvmpt8abh3jnsp8axuo0y/icg/5ox8eib9pibqtyexgqa03+lcp0bxcqqpi7sgabrhdcjtn+vpw9cu2zrlija10fnb30hxigxico8syogzz9xcnax6py20fklxrbe5b/aaavprwsw/rq9qeumactggnnuxrtsf2z/bleos38dhz5p4t0ip3iw+wciytokh4mxhk9mi7ffeq4e4uuaasjbgygkiqo24fmpdajyqfwr21rxrixguzgoc4sdf0la9sci/8amoi4fio//iwd64h+v6tytj070vilynonmpeyg2noatkxghujif8a63d/ao5n/wb+h3bxp/8aowbrywj/g/tdnmwjntmgjxkbebd+dmm2allfhfgq+g4id+jr/zwsafbcnedby/nxn/8adbf/afvqkrvp9lqqawpjizywcau/ewprhbf/afuzzffqccyto0ye2p8a7gr3rriin9kutk0sfhejpei1xn2eywl+9tsd7csxafeylgf9dk1/9tvpq4hwbvjhbsyn/ci2rwzzg69opsvxxrkn6n4ykz7yuan/aer3lh2p12mimf4dhegjhrcszy/qvirrqyrqereidrqpxn0o5jidpvflwbbftddaagg0vd5gaae9a+aiggacomg19kx2czmu7aehnodj5axwlw4qt3akcp7vthiljzo1klshwjunspqcgouzgeoj5f8amlpgajqxmf16u3xztlbhwpnsa6dzuo8ogjuymanpo/aevl2rrt5ii1k7qsfko5da8xrftjezrptphelmrqfjmdscszqazc9qr7ur0snq+utvqxm9f8astiq8ocfc22oi+dhw+jvwhrgykaegqder9zorxadoddtzbqmgtabtgigtpc+teueyodzpaywtpim0cxg0lrxt5grvamgqyg4suogyzfdxneahyxlwib0bzsqqectcnpmfyt2c22mepgy3xkvf2mj7rrzzpasocbvfvkwcxohf2zoxod0aao3ro1uvcuxic5bzilfxkqoa54ahc3ueutuntrs2tnmlewqjzqubqa9azr0wiskmzpxbso1vwpf7d05zayhmvzklaxab3gsd6zvnt3pbnktytmnqbc/63qywwjjnv3pu0bnjyaadqk6eea6dp60s0xikjkehrzugp5xmjuqqj0o0xuypvusxcrem08tjv+aozir3oqgimnzi13579ypytdakeagqec1yrgo9adztkuiikidqgi4dsy75j+fn8mx4t94130oqanminpeimtehipuqvtispupti3eew9m5fuehlalmgsyakwkapxcnwyre6ro01k4vjaamrg51ymevsk5f/wasxd7ymmxeji0ph5v+qkisrd/ldikragvlzicwbqdzbrzpjo8dtwj51gd+npkmfss1iy3fjaodjag6/i79nk4iftvflz8avvlszyuxcry80qh7ga5djr8a4gyocxkpyxw2a/vfgm3poo1zt+g7iu2oftd6dvem1ybla1bchvo5l27860/yo8tv+i1lundwstyr+3izgohrwzwd8mv9mdypbvlyi28e5jx0ffvue8oxdofvcgh7pa+6oo0zwao10vayari312mr56rs4wnmhcrguzsbse3lamvdbkp+rrrhq1g9jnr+aonzhyzn8zjnqlfnucyldx+yd7ci4dwamgjfl6vteytxmrauibeqykgp5vhnjg7vgbcwr2jpnroanlsdvmbjlaywvkdbr4gi1bogg3prnt9gmnnvc+a84pmf1nt9gn9e6p4ew37pko4pmbd272g8tohtz2awqwzechvujygisyjnqdtg1dwmdyenznt8qghhmeaa/waq94hbzgaadwgwo34f41v2ajv7euyqok5yeglsbhxgff7kaw98tmiionccjrs1rdmcqeiucgscn49z91nmr/vpynddq2mfbosmwjpj+datndiga3bktqtorqrp1oitudooxuebetqum5hsmoufdsyeyj39au7xpde7gbmaeye1btjezsgtnbqgb6a6hb0qjry7zbg5mtpp2hattcjyiud4xxzinnzw+g5ryiwuyhuyz0vawhqsa7xhgl8wzbuzwtmoovviwerihx5hasdqvklu5enaxtpwrlybliggiqr0io4o9dvjymjalhspbt/aip/zul9wo2z824yxtrm+tboighrwdbqbn3ryaqfoxipny5pjl+kdz6rvfby39f1vwzwxigxksshxkrodd9rmgqeo5u9cthokbht7qubqqqmmv9l5rk45xoybjkznj1lzvectrb16ctoavxwgzlsibg5ido07hv3qo/bfqltq19dbshircrxaizkdb3eidyo80mv6tvi0raqtjkctij+dwzupnyrwmgsdzqv4jjpctu4utle5ruahhstcloht5qraiznmotfnofs0awpsmj3qfqmind8ulylcykhxq9to0inm1bmowqkavujk4h9i1txhansnrzoyd4zc5qfi71snb0ib9aq/nqbuchsig4zgddfj+ec6ddveabi0svx3+/2xzjyqll2jzaa9az+2phsvm9uzjsutv7j5uavrclos0i0mvklstgsvv6tqro0obuj1rov4s8cqtwxitipljnnmgxyg6anai8kt3esol1g7qodmjgkeuu0u2k5ne8w6/glnshs8uo+a6ltqccd6hq1owi4d6q2b1ww0dywyqwwfixedwpcegggcqypq8jxocawlqw5qk2fzzwyh/ninfnzz0it5jujdboni+ny/x3x7lyvgvagbowgpij9qlna8utlkzomj1jrfwz1tms1ifz2qgsoxn2zth3uwszh9krce4yqgubcxez5sqopiwdukw43hlt8pabir0yftgawii03zwcsoolcspsfwafjhdplhuqpdtoyydz66wy5dovmjeisvdlimroukt94+yrmemcn0u3bmjzay29bei1sgyuzooonuc9ayw/dm7tefwnm6nkyadw2zeah4miuk7euavnjxjeyvjq2dcskk1i8jgirvdubtbvb55ozrh1yjtjbtla61o3r+xkprmf+yy/hwihnebdxl/vmqti1ysi50u1ynxhrrskuthscrz4bb8pgjofx2ovaiyvnkbjqxed3plhpabogzmtbgwablirajogprtdmo40778h7l0sjbdlfkqs8mjq/oh8ht3rbi+qwnsdmmd2gt8qm9gn69aulyndprql6ohi8mhuqwkhfwnu9p2nqdm1thvxmswehm2nqbib9kvuyl0pvklstgcuo5rkpdobedeshjf0mw2gubll0hhqykhywfhk/s9yrc+m+h4jfxk28pbsmwqs3624vdsqfkqazyeyj5my0fcz/knxrwvcya4q6zguvklecrr79kw0/dalg9nex/amowemalx9lf8zsf78pvgfdbcx1zb901zmd+gwkimrzxjzggvih1iibkkx0rch0twyshoddp0utifoyjqjfftuqr2y4q0ddwdja4uyt1qvbkqtj0mb1qh65zh6vzqraweqjmr49srzmi570heynidxzs4wwgyagtizngwdhahsr8q0kzk5rvs6gzg1w612swzqu+ga6uyhmuywzcvzqcmdtkdvnuxlxfv5vql9szv7h4murxmabme+hemtocfmnnqtgc4rvntif6+dyup4vdtplkwzzxzxnrqbjcetpshh8s8uqcxhgfdbgyr2a8xa+k7vm0wudx068qwoi4nafmbh1rlir8krtf49mq1oulhxbbxege4rmmpqpdiipmc6e/thaecybajzxi1wrpk2nsvrw/fc+ixfaxzh3g1ycmxh/r8r/by/7dmsfki+c4tcutcpamrmi60hsyka2xpp5u/i/9h/tb/warvi8pwd9wgfgxzqrafmdlmbi3z19jrr3crjeh88xaaaqb4mdfabc86yh8qn3nutg8zoppp0fcxj+hx1xmmnxojcqryicyj/zwkttjyo8hcjgx9vyklbj0bubegoz+ytux5im7uirfgfv7fndz1nu1ovfkky/zfewhcyyy7iyllezbae+hmgn+ue9klgcwdy4jbamgnxy+dezvyl/n5zcmpthxeotglm6srpdhmjx0b6ggw34kzxfgotaiwenagysoyxf7qcr86um0dupq+dy+yfyhib3eaypc1824nwzjfwqvfvudewxtt2zasrxe8u/j/jwfgojw6w1zm9dlgjmcri9qeytp0qdxtjcgz+ba8rs7+gmzhszzrjhwadqkjqmxdyrnhrp4qnfpktqjdizmutacaldpcg6ob7a+wq3dtbyb6xzp7mxi+wihyy4qklow8g9w0n2en2o9u8phujywib26t00ocfa2vqrxuaj86g5lypcma5u7ebekatrmbjvdqurma+mgj1inko9wwmpzgwdplmrzzq2h5wdvkk0skuxfguudcmxxytugbbhwa3x7rusnfomtacktj28omifmq5keqtljzn6yhbxmp33hecnvapeaasuog6egsdtpfb4i3okkpypiiii8wzw2aronjp2py3cvxoqwmzeehkrsherc+djif3jkjtkyv5gcnpzz86ywd1bgzanhlmuqkebpyexr8j33zvknsjfq0ewavuqswbtyk7wr7e84zcd0+dxxwkya6bjbixmaso3inpv2y50dlbllkalcghi8tvgh+2iyzch0ydroovonky0pp1fdkstwlyficpgu7grik/fmdxnodkd1jvht2rgjy3pfy5lcicjhkdvasad2mrjomnwtllsghaqdhqjg1anckutrodahvcgaaacr5j0rze4huakezoigk9zynaa9w+kvgdssubkfiamdp2olsjglqytxcwiikeqr2o9z+buowcnvbvbzpu6swhqchrwa8objgacsegg5pxdyhvc54v7pzgvpkspyfrqq6lhz0oolwwudk6yndqyikqcpgop25eabmewnhuewmksjxbmxtkzl5jyzco1nue5uni1aci+0lylcsbqtmdnsbczgyolxb5eigbq2bwdwz8xzexg1jloixpymrt99stmq5xggmaeb5wa3hfch3fbwv9jcubkkei20huhrlbkw0yevfntul2my13i4rwgbysrfxaj1ugmrcpluipomspjlcbkiox9jaovtqiifsdckvdytdwnq9nmfghfyx7lqmlgk81nkbbiblizbiyitore5zm7ijrpxi42jpeaylccgtl7depbatos/g1si2jegtosj1b6vounloljcu+d3fogkuifafnqpo5+5bupc8skqawxe+ztyq7gf0bjjznvtnqwqagc9wj1jpvjznlx8w3iknw6joq6lwk/ulsv/abcm7dkqcqvmcrimdpfu5ytitxxemtxbzrsrkihhwh2eqeg1gtzebxdw3tpmhhiwrtjia2hldwdqddpi7vv37qyftmeb8x0i7g6isa9hfa1iddswbo3zfym3godfm8vvikhseo1vf99m1augiviioxbka+lcs6o45ekwplxyso3wg+9dwfdwrvdiie4bnaplefcanpa0nntlq5sppqnjwabzaifyzplyprvcblrrmk1ws8ewsw8x9savpt7ksiybhpoexn7wk8xgcw8crjmjvom7gynr3fbgnohiyshy6kqy9ypdd5x9tgw/ovi6j0o1et4iqavtmtrxv5o1s0vxfhkvbvyuinpelmoykp17fb65q1mvzry3w+glwmxabpmgba+9f8bqwgpmdcyhtm+gdm9i1n2mkueyxiglauv1o5akkjpafcya1dypagirznpul4+27gkpakjmsj8o1jlimtp86tasbstjlngzjuqnhpsbow60txlgaw3ksmozk5biztl0ipigx7gnljapnl2wos5rmzdnafaaik8qxfxbnu2bkakjykdkp6/hwjjssvhiwiju3beh0+k2lls77evljbu866qsu1gwujxqzcjlf4l8pxtmyg/vevbn8fio+f2n4fh23+bwd9nj5tdahoateb8rhh7yn0yag/nftrl4pw9seufqpcliyayausczab59pyctr7qhidj6a8tjwmnbynxswp2vlat9y2g8s40h60dki/hmud41edj3nkfton/co9vwyiqwibjqhqajlqifjn7cifx0o1vqqiq1dsjw0jxdvg0b8p0ox02panjswkegg7eefmubw2gxbvlfxwmqg4dybtwhltst+1qzjt2rc4bivft58jidzuyccorka/zshd8pny4umrhibt5tkwwoglfj/chwtpm3gsfv7tvm8kk9vshnz18/rch2co+//wcsnm09qnzq1niyb9hxqqkgnmxkz3ayegmsisytijtmni0zaag/z8qvrjfxew4fdvlwpkafo0bjaparzns5dc6sqbigugk6auqejkgksgvgcoetmsqggjuw+dcri3ti84xi3utilridnyljpjewito9amgyczp1r76xwdw5afmaaz7pef7rvxpkqtesppapsgm1mxrtnoy9ily21z3jcqcsymanzpwxionlxzvt5gtq60bpy3lrwby9vzwnxq1p4i+icbjkoonmiajm6a9p0pbdizasleubqboykwsknsdyedflwedqmj9o33ukwdbbslcdqzw2agx4qdpt8zffwphbkxdqjphbnkwnwxljzhgms2o9sdrcxi3urlyioknlequttg8lguuv2voo9tlymyscpemwmiiade8h1qxuqfasjhmzbuollpgynyjsyrgpevtko2dmuficvkeu0eyca18hbtqos1lyrybbj1pz3rn+kydvvnvdwd22jpdi83s0fm9k3ey8emjya8b/ain6zmcttbago12ujdrpkhy05zwvwvhxlklkhdgweakehokyro2nklsthpvc2kqq2gnp2vdmszyacqp7rpktykaaaiaaahiabd0rdmotkt8/ojwbxtyihxormqdjcguf8qwpc4g6uyfbtknnozzzz00+egnksote8rlybw3zffl+0biipzjwlgmxfpsbs2fgubaad0xsvtzqjtut6/jsz4iayijrwchbkbwc/wbxca9zsiri5dasbibrxxtmgykzzekujdyf2ouxramtiwssvqkqwgbuxga3w1rgp0aj9jwngx5xuzzo5guk9rwv7q6nhps+kbnl3hqgcgysw/ej+debq2jtze1buniczhqbmqji1+qjjcn+ttspzczfxg9vjvgdszwq4a+1u7cqwdc7mdd4ysm5aeeyap9dxipduc6cflj4bjlmcwgcee7gwpto+jawtujfqwkgga+ugouh0/zp8rqnw6/f9aolmvhtdtzxbmggquiju5exeg+teydaehfsyifpneewhlkh9oga+tva2bzvakexkyqyghluyp5gqzb5w1x4leheybsptj1uhqp/ia+dqmtrfpqg/dyw0jumge31igloqw5gw5056vv8mulxjrkjuhkdsndjhpuvnhfa6sdsxiu/vsaia/dufnq94lg/ftsgcowgjjwd1ir99htez6s2b1pxemoi7rovighmkyv4aplnyy01swo5ty0nr3owevfnykehikrjgmhubgpcfiuthb2xxc0kwvibjlmzfohukfb71ne1morwcp2x8maya2dbkdo4+xeo3a5mbikhcfm1veapufaw1owrfnouroxyxjmszj2g3okgxae5c0hnkgyjam2nxtwamlgd7snjbyvbagalmgbiqbcxknyep071ky+6gs3ggoay+6nueoiotq8rzspnkyme6eqyp2fokemjjbuunjbyoin9khxjqnaeo9kqvgzo2kafhpe63vgo/ua/izfkmgb8kxw9viowzigp6nmfcyalmrrybeeoybxltx8aqsh5hont1jbns2kzrbwmtezgvlqmsydwpxx6papplhwouoc3kysshlzgvylflkhucgcq3ock9uhlzdr/otkjshdqp4dkhzxhq7ins5kq0opoqkqvcsvaohg+omsw1gcwr2ulojhkpjc5gu9tmak8xfoyvd+g6x85itqqwadnttc0inr8xpntrsf1dzc5brta3lxzwd7ugvatlxrgxpdywfuidylrbctpzru+i5jtosnluazoyqpnr7/ksmxf1esj8q+m3zc+ct6nkpy9k6jhq7nvqj+ghuqvkholbuijvs4kaxoirgvskhxkc62czakvx/fmg6klzhoenwhlxsp+cc23iip1+nrjktizv+scsyg4j5xvmpxo2qfvgql1ygj4xdfft9of3axgxmixqqco6/yil7uocsrmzdlzbikdg01hmdkwff+nwcvxcmy5alluspvqthujhvq3uzxyrgy+uotenkqgcohjyqtmzdq588akegy+oi+ihf2owe4ll1nq4tlvdi2qqn+5jpzlrz22htioaxqdytputzj686p4yrjv43/q7n2v6n0iknvxiogkee8eh2jvs0z+nnryszgiva/d4dpwfu3m3yyz71bayqkb3i1jdvaombystu2wb0fczifpdnzdzgmgq+xueylo1+qyp7/khe/8flrpqr0jwfcvm28cevrr5guklyv0bag8hkd9o1z/+vsdg/hnkcr+kk3ekrmvhqjfzhoie67akehnlriqrvcockwrgzrcmdtnyii5qaoqvf1/vsprqnuzbfxrnspx1q0w8c2iazfqyw/d5uwfpavr/wcd/glosou+joxk+9vkhryrmln0hmieaatompear019ddsdytivivlgyocqzlcqyvkk6hpbk7eewzpyxh9nw4rcq8hqouqpelsofcdvwll2nxovchwuwmvkn9pfygr9zsufxsky14o2ubbbmbeu+vva1nextily5qtsd0ji9johpzyxz0vi+ptpookli6gqj+ysfd4pksxlcw+d7ak9dchyn4y+y1w3wresnxieaqug09kf4f8arsgytj70sqjq9wltsdmxleamba9abobxv4rifz+a4dlrwvyovl0tuqvkfjuqvkae9uavu4ihlt9erqgq3clpkq/odogrzipfaza4mn1rxo4on1rwvuodjpb0+qkoecwz+yk2alayv6bt/vfe/og19uvs1klaxv0da+qplxo4fb+qplwxuqgyl4lbh7iq36it/vfadslayw4mn1rxq8ht6orvqvkbnlwpogo6ybb+ykaqvqcayi0afbfmm68igkotxqvka8nqv7uod//z" /> </div> </div>this plunker 1 have idea please
expected
remove flex-center div
<div class="flex-item"> want vertically centered! , am! </div> keep class on div containing image
<div class="flex-item flex-center"> <img src="" /> </div> change .flex-center in css
.flex-center { align-self: center; } wiki
Comments
Post a Comment