Question

我有一个带有一些列的Bootstrap行。在列中，我添加了带有文本的span标记，以及＆lt;'a'＆gt;之间的图像。和＆lt;'/ a'＆gt;。我需要将文本与图像垂直对齐，现在它始终位于列的顶部。我尝试了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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

只需使用标签..

<a href="#" target="_blank">

            <img src="@Url.Content("~/Content/images/xxxxxxxx.gif")" alt="Powered by " class="img-responsive "/>
            <div style="float: left; vertical-align: middle;">Powered by</div>
        </a>

您也可以尝试使用span标签，但只需将span标签放在img标签下，href文本就会出现在图片下面。如果您有任何其他问题，请告诉我们。

希望它能运作

Answer 3

你可以用两种方式做到这一点。

使用绝对位置

使用 display：table

使用绝对的位置

DESC：将父元素{{position：relative}}和子元素（元素居中）作为

{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
}

使用表格块

DESC：将父元素作为display：table; width：100％，将第二个parent作为display：table-cell; vertical-align：middle;

注意* ：{table-row}应该有一些高于其内容的高度。

中心<a> tag text and image vertical in Bootstrap column</a>

3 个答案: