html - 在 Bootstrap 列中垂直居中 <a> 标记文本和图像

Question

我有一个包含一些列的 Bootstrap 行。在列中，我在 <'a'> 和 <'/a'> 之间添加了带有文本和图像的 span 标记。 我需要文本与图像垂直对齐，现在它总是放在列的顶部。我尝试了 vertical-align: middle 但没有成功。

<div class="row">
<div class="container">
    <div class="col-md-2 col-md-offset-5">
        <a href="http://www.xxxx.xxx" target="_blank">
            <span style="float: left; vertical-align: middle;">Powered by</span>
            <img src="@Url.Content("~/Content/images/xxxxxxxx.gif")" alt="Powered by " class="img-responsive "/>
        </a>
    </div>
</div>

有人知道吗？

Answer 1

我最近尝试实现相同的目的，在缩略图按钮链接内的未知高度和宽度的图像内垂直和水平放置一个跨度。这可能对您或其他挣扎的人有帮助。

jsfiddle demo

.thumbnail:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.centered {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.centered > span.fa-play-circle-o{
    position: absolute;
    top: 50%;
    margin-top: -0.5em;
    margin-left: -0.5em;
    opacity: 0.5;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

a.thumbnail:hover .centered span.fa-play-circle-o{
    opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <!-- inline color for visual debugging only -->
    <div class="row" style="background-color: aliceblue;">
        <div class="col-xs-6" style="background-color:pink;">
            <p class="text-center">text above</p>
            <a href="#" class="thumbnail btn btn-default">
                <div class="centered">
                    <img class="img-responsive" src="http://placehold.it/600x200" />
                    <span class="fa fa-2x fa-play-circle-o"></span>
                </div>    
            </a>
            <p class="text-center">larger text<br/>below</p>
        </div>
    </div>
</div>