Как сделать так, чтобы кнопки располагались вертикально над текстом? - PullRequest
Новая
       42

Как сделать так, чтобы кнопки располагались вертикально над текстом?

0 голосов
/ 28 апреля 2011

У меня есть этот HTML: 

<div id="details">
    In the meantime, 
    <a href="http://www.twitter.com/iDreamStill" target="_blank"><img src="http://twitter-badges.s3.amazonaws.com/follow_me-c.png" alt="Follow iDreamStill on Twitter"/></a>
    or 
    <a href="http://twitter.com/share" class="twitter-share-button" data-text="DreamStill, a social music platform, is launching soon! Check it out!" data-count="none" data-via="iDreamStill" data-related="JustinMeltzer:Founder">Tweet</a>
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> us.
</div>

Результат таков: enter image description here

Как получить текст и кнопки по центру по вертикали?

Ответы [ 2 ]

3 голосов
/ 28 апреля 2011

vertical-align: middle, примененное к каждому изображению, должно решить проблему в большинстве случаев.

Но если у кнопок есть тени на одной стороне или они не совсем точно сбалансированы, вы можете не получить идеальное выравнивание по пикселям.В этом случае используйте чуть более грубую силу: 

#details img { position: relative; top: -2px; }
2 голосов
/ 28 апреля 2011

Вы пробовали vertical-align: 

#details img, #details iframe {
  vertical-align: middle;
}

ОБНОВЛЕНИЕ

Корректировки, поскольку значки имели некоторую специальную разметку.Посмотри в действии - http://jsfiddle.net/8zcZf/

...