Question

很抱歉，如果之前已经提出这个问题，但我已经看了几个其他类似的问题，试图合并解决方案但收效甚微。我有一个带有两个col-md-6的引导行。第一列是图像，第二列是列表。我想做的是将列表相对于图像垂直居中。

以下是我的HTML的样子：

<div class="row ">
    <div class="col-md-6">
        <img class="img-responsive" src="500-by-700-image.jpg" >
    </div> <!-- col-md-6 -->

    <div class="col-md-6" >
        <h4 style="font-size: 20px; line-height: 2; ">
            My heeader:
            <br>

            <ul style="text-align: left; ">
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>

        </h4>
    </div> <!-- col-md-6 -->
</div> <!-- row -->

关于如何实现这一点的任何想法，谢谢。

Answer 1

环顾四周，我找到了一些有用的代码：

<!-- CSS -->
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<!-- HTML -->

<div class="row ">
    <div class="col-md-6 vcenter"> <!-- NEW -->
        <img class="img-responsive" src="500-by-700-image.jpg" >
    </div> <!-- col-md-6 -->

    <div class="col-md-6 vcenter" > <!-- NEW -->
        <h4 style="font-size: 20px; line-height: 2; ">
            My heeader:
            <br>

            <ul style="text-align: left; ">
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>

        </h4>
    </div> <!-- col-md-6 -->
</div> <!-- row -->

Answer 2

试试这个。它对我有用....

您必须将此css添加到您的代码中：

.col-md-6 ul{
height:inherit;
display: table-cell;
vertical-align:middle;
width: 100%;
}

垂直居中ul / li文本相对于图像

2 个答案: