Question

我正在尝试垂直和水平居中位于下面代码中图像左侧的列表组。

        <div class="jumbotron">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-group center-list">
                        <li class="list-group-item">something here</li>
                        <li class="list-group-item">something here</li>
                        <li class="list-group-item">something here</li>
                    </ul>
                </div>                              
                <div class="col-lg-6">
                    <img src="images/ModelBack.png" class="pull-right">
                </div>               
            </div>

我创建了中心列表类，并尝试了一些类似问题的示例，但我的CSS显然缺乏。

Answer 1

这对我有用：

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h1>Big Test</h1>
                <h2>Little Test</h2>
            </div>
            <div class="col-md-6">
                <img src="img.jpg" />
            </div>
        </div>
      </div>
</div>

Answer 2

你错过了jumbotron上的结束标签，这可能就是问题，

<div class="jumbotron">
            <div class="row">
                <div class="col-lg-6">
                    <ul class="list-group center-list">
                        <li class="list-group-item">something here</li>
                        <li class="list-group-item">something here</li>
                        <li class="list-group-item">something here</li>
                    </ul>
                </div>                              
                <div class="col-lg-6">
                   <img src=""></img>
                </div>               
            </div>
</div>

立即尝试;）

jumbotron左侧居中文字，右侧图片居住

2 个答案: