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

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 添加到您的代码中：

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

Answer 2

环顾四周，我设法找到了这段代码：

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