如何让 bootstrap 网页中的文本居中？

Question

我正在写一个网页，目前看起来是这样的：

我希望将这段文字放在页面中央。带有文本的容器应该在页面的中间，但里面的文本不应该居中（它应该向左对齐）。我究竟做错了什么？

我的html代码是：

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                 <a href="http://www.company.com">
                  <div class="text-center logo">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png">
                        </div>
                 </a> 
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 info general">
                <h3>test sth</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
        </div>


        <div class="row" id="summary">
            <div class="col-lg-12 info">
                <h4>sample header</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
        </div>
</div>
</body>

和 css - 除了 bootstrap - 如下：

<style>
    body {
        padding-top: 70px;
        font-family: "Helvetica Neue","Open Sans",Arial,sans-serif;
        background-color: white;
    }

    .logo img {
        width: 100px;
    }

   .info {
        width:100%;
        max-width: 700px;
        margin:0 auto;

    }

    .general {
        padding: 24px 20px;
    }
</style>

-=====编辑：

只是一个跟进，到目前为止这个网页是这样的：

|                     [LOGO]                     |      
| text text text text text te                    |
| text text text text tex                        |
| text text text text text text                  |
| text text text text                            |

这就是我想要实现的目标：

|                     [LOGO]                     |      
|           text text text text text te          |
|           text text text text tex              |
|           text text text text text text        |
|           text text text text                  |

Answer 1

将 general 和 summary 放在同一个 div 中，给 div 一个宽度并将其居中通过使用

margin: 0 auto;

由于您使用的是 bootstrap，因此您还可以利用网格并为父级 div，例如 classes col- lg-8 和 col-lg-offset-2.

另外，有点跑题了，但是如果你只给那些 div s col-lg-12 class 你可以总体上避免因为 divs 默认设置为 display:block，因此已经占据了 100% 的宽度。

如何让 bootstrap 网页中的文本居中？

how can I center text in my bootstrap webpage?

html

css

position

twitter-bootstrap