jquery - bootstrap 3 中窗口的中心

Question

我正在设计一个单页网站，我需要在其中将图片放在窗口的中央，并在上面放置一些文本。

在 bootsrap3 中，网格系统从下到下(按行)分配屏幕空间。

我希望图片正好位于屏幕的中心(而不是任何行的中心)。有人可以帮助我吗？

这是我的代码

<div id="page-content-wrapper">
            <div class="container">
                <div class="row">
                  <div class="center-block">
                    <div class="body-data" data-link="about-me">
                      <div class="col-lg-8">
                          <img src="images/profile.jpg" alt="image with rounded corners" class="img-rounded"/>
                          <br/><br/>
                          <p>I am a masters student in TU Darmstadt. I am from Bhubaneswar(a tiny city in the eastern part of India). Now I am in Darmstadt in Germany.</p>
                        </div>
                    </div>
                    <div class="body-data" data-link="education">
                      <div class="col-lg-6">
                          <p class="text-center">b masters student in TU Darmstadt</p>
                        </div>
                    </div>
                    <div class="body-data" data-link="work">
                      <div class="col-lg-6">
                        <table class="table table-bordered">
                          <thead>
                            <tr>
                              <th>Company Name</th>
                              <th>Location</th>
                              <th>Position</th>
                              <th>Technology</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>Tata Consultancy Services</td>
                              <td>Mumbai</td>
                              <td>Systems Engineer</td>
                              <td>C,C++, Oracle, Shell Script</td>
                            </tr>
                            <tr>
                              <td>Siemens Technology Services</td>
                              <td>Bangalore</td>
                              <td>Systems Engineer</td>
                              <td>C++, Qt, Shell Script</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="body-data" data-link="contact">
                      <div class="col-lg-6">
                        <dl class="dl-horizontal">
                          <dt>Email Id</dt>
                          <dd>dhal[dot]asik[at]gmail[dot]com</dd>
                          <dt>Twitter</dt>
                          <dd><a href="https://twitter.com/asit_dhal">@asit_dhal</a></dd>
                          <dt>Github</dt>
                          <dd><a href="https://github.com/asit-dhal">asit-dhal</a></dd>
                        </dl>  
                      </div>
                    </div>
                </div>
                </div>
            </div>

Answer 1

在“偏移列”下的 Bootstrap 文档中 http://getbootstrap.com/css/#grid你可以看到对此的引用。或者更改列偏移量将最适合您的需要。