将最大宽度和对齐文本放在父级中间

Question

在我的一行中，我希望将最大宽度放在该div中。

我的首页文字目前如下：：

我想在这一部分中放置最大宽度并将文本居中。

理想的结果：

CSS

.homepage-text {
    font-size: 130%;
}

.light-section {
      background-color: lightblue;
    /* color: white; */
        text-align: center:
    }

HTML

      <div class="row light-section">
      <div class="col-sm-12">
    <div class="col-sm-12 homepage-text">

<p>Text sit's here</p>
</div></div></div>

直播链接： http://185.123.97.138/~kidsdrum/moneynest.co.uk/

Answer 1

也许我并不完全明白你的意思，但试试这个：

.homepage-text {
    font-size: 130%;
    max-width: 1000px;
    margin: 0 auto;
    float: none;
}

Answer 2

试试这段代码：

.homepage-text {
    font-size: 130%;
    width: 960px;
    margin: auto;
    float: none;
}

我设置了固定的width 960px而不是width的{​​{1}}，并将此容器置于100%的中心位置 此外，您必须取消设置margin: auto;属性才能使float正常工作。

Answer 3

将内容换成固定的width或最大宽度max-width div，然后设为float:none;并设置右边距和左边距auto !important

<div class="row light-section">
<div class="col-sm-12">
<div class="col-sm-12 homepage-text" style="width: 400px; float: none;margin: 0 auto !important;">

<p>Text sit's here</p>
</div>
</div>
</div>

Answer 4

你也可以使用动态保证金＆amp;宽度值，不改变浮动也不使用margin: 0 auto;（如果要使用该边距，则必须使用float: none;否则，它不会自动居中主页文本。）

.homepage-text {
    font-size: 130%;
    margin: 0 25% 0 25%; // Same as margin: 0 25%; but it illustrates 25+25+50=100%
    width: 50%;
}

Answer 5

Bootstrap已经为你完成了这项工作。您需要设置的只是容器类的最大宽度。这样做有助于保持页面布局的一致性。 Here is the fiddle.

.container {
  max-width:700px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="container">
  <p>Text sit's here</p>
  </div>
</div>