html - Vertical align for div with text and other div with picture (BEM) -
i'm working on third project, , need help. need align text , pic on added picture. html:
._colon { width: 700px } .big-cars-list { list-style-type: none; margin: 58px 0 0 0; padding: 0; } .big-cars-list__item { margin: 0 0 14px 0; padding: 0; } .big-cars-list__item__name { font: 700 53px verdana, sans-serif; margin: 0 0 18px -3px; color: #000; padding: 23px 0 10px; } .big-cars-list__item__price { font: 700 21px verdana, sans-serif; margin: 0 0 11px 0; color: #000; padding-top: 1px; } .big-cars-list__item__price span { text-transform: uppercase; } .big-cars-list__item__link { font: 400 14px verdana, sans-serif; border-bottom: 1px solid #e10025; position: relative; } .big-cars-list__item__link:link { text-decoration: none; color: #000; } .big-cars-list__item__img { display: inline-block; } .big-cars-list__item__img img { max-width: 100% } .desc_wrapper{ display: inline-block; vertical-align: middle; height: 100%; }
<div class="_colon"> <ul class="big-cars-list"> <li class="big-cars-list__item"> <div class="desc_wrapper"> <h2 class="big-cars-list__item__name">homan 11</h2> <h3 class="big-cars-list__item__price"><span>from</span> 200 000 no.</h3> <a href="#" class="big-cars-list__item__link">looking something?</a> </div> <a href="#" class="big-cars-list__item__img"> <img src="http://media.caranddriver.com/images/media/51/dissected-lotus-based-infiniti-emerg-e-sports-car-concept-top-image-photo-451994-s-original.jpg" alt="civic 4d" ></a> </li> </ul> </div>
editable here: https://jsfiddle.net/qpgtvqba/ maybe me , told me mistake?
Comments
Post a Comment