Подравняване на лайк бутон и снимка

[BurnX]

Здравейте,

имам една снимка и обикновен фейсбук лайк бутон. Снимката е малко по висока от бутона , искам да ги подравня заедно , като фейс бутона да се появява на средата на височината на снимката( да не е в горния край или в долания) и да са долепени едно до друго. Първо снимката и след нея бутона. Някой да има идея как да го постигна ?

 

[Sky]

От: Подравняване на лайк бутон и снимка

Боб ли да хвърля или стъклената топка да вадя?

 

[Firefly]

От: Подравняване на лайк бутон и снимка

Експериментирай с css, предполагам с line-height може да се пробва, ама лайк бутонът е малко особен по принцип.

 

[BurnX]

От: Подравняване на лайк бутон и снимка

Боб ли да хвърля или стъклената топка да вадя?

Лайк бутона е с този код <div class="fb-like " data-href="sajt.com" data-width="90" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>

картинката си нормален код с <img> таг

Firefly-пробвах се сам и поради някаква причина не мога да се справя с това което намерих в гоогле. Или ги подравнява прекалено разделечено , или лайк бутона е в долния ъгъл на картинката , а не по средата.

 

[AMitrev]

От: Подравняване на лайк бутон и снимка

Отговора на въпроса ти е CSS. Нещо такова трябва да ти свърши работа, за отместване и т.н. ще си настроеш margin,padding където ти е нужно.

CSS код

div.container {
  height: 200px;
  width: 100%;
}

div.container div.fb-like {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

HTML код

<div class='container'>
  <img ....>
  <div class="fb-like " data-href="sajt.com" data-width="90" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</div>