Question

我正在使用Twitter Bootstrap并尝试将文字垂直居中放在比当前文字大的图片旁边。

我无法使用line-height，因为文字超过了一行而且我还想允许添加文字;所以我去了display: table; display: table-cell;方法，但它仍然拒绝工作。

以下是相应部分的 HTML ：

<div class="fs">
    <div class="container">
        <div class="wrapper row">
            <div class="icon col-md-2">
                <a href="" target="blank">
                    <img src="fs-icon.jpg" width="170" height="76" alt="Flying Solo Icon">
                </a>
            </div>
            <div class="text col-md-10">
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt, lacus sed pharetra luctus, odio purus faucibus nunc, mattis molestie sapien libero sit amet leo.
                </span>
            </div>
        </div>
    </div>
    <!-- Container Ends -->
</div>
<!-- FS Ends -->

CSS：

#about .fs {
    padding: 30px 0;
}

#about .fs .wrapper {
    display: table;
}

#about .fs .icon {
    display: table-cell;
}

#about .fs .text {
    display: table-cell;
    min-height: 76px;
    vertical-align: middle;
}

...这里是CodePen：http://codepen.io/anon/pen/XbdRXE

Answer 1

我认为CSS可能与默认的Bootstrap CSS的行为发生冲突。但是，您可以完全绕过此方法并尝试将其用作自定义类：

.vertical-center {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

只需将其应用于span元素。

在Twitter Bootstrap中垂直居中文本旁边的文本时遇到问题

1 个答案: