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

时间:2018-01-28 17:35:38

标签: html css twitter-bootstrap vertical-alignment

很抱歉,如果之前已经提出这个问题,但我已经看了几个其他类似的问题,试图合并解决方案但收效甚微。我有一个带有两个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 -->

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

2 个答案:

答案 0 :(得分: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 -->

答案 1 :(得分:-1)

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

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

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