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

将一般和摘要放在同一个div中，给该div一个宽度并使用

将其居中

margin: 0 auto;

由于您正在使用引导程序，您还可以使用网格并提供父div，例如，类 col-lg-8 和 col-lg-偏移2

另外，稍微有点offtopic但是如果你只给那些div col-lg-12 类你可以避免整体，因为div被设置为 display：block < / em>默认情况下，因此占据了100％的宽度。

如何在我的bootstrap网页中居中文字？

1 个答案: