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

【问题标题】：center <a> tag text and image vertical in Bootstrap column在 Bootstrap 列中居中 <a> 标记文本和图像垂直
【发布时间】：2015-05-06 15:56:15
【问题描述】：

我有一个带有一些列的 Bootstrap 行。在列中，我在和之间添加了一个带有文本和图像的 span 标签。我需要文本与图像垂直对齐，现在它总是放在列的顶部。我尝试了垂直对齐：中间但没有运气。

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

有人知道吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案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 文本将位于图像下方。如果您有任何其他问题，请告诉我..

希望它会起作用

【讨论】：

【解决方案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% 并将第二个父元素指定为 display:table-cell;vertical-align:middle;

注意*：{table-row} 的高度应大于其内容。

【讨论】：