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

我相信这应该有用

<div class="col-md-4 col-md-offset-4">
// content here
</div>

或者您也可以尝试

<强> HTML

<div class="container">
    <div class="row vcr">
        <div class="col-lg-12">
            <div class="row ">
                <div class="col-md-4 col-md-offset-4">stuff</div>
            </div>
        </div>
    </div>
</div>

<强> CSS

.container{
    display: table;
    vertical-align: middle;
}
.vcr{
    display: table-cell;
    vertical-align: middle;
}

这是一个小提琴：Fiddle

Answer 2

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

在bootstrap 3窗口的中心

2 个答案: