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

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>

直播Link: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;
}

我设置了 960px 的固定 width 而不是 100% 的流体 width 并将此容器与 margin: auto; 居中此外，您必须取消设置 float 属性才能使 margin: auto; 起作用。

Answer 3

将内容以固定width或最大宽度max-widthdiv包裹，然后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

您也可以使用动态边距和宽度值来完成此操作，既不改变浮动也不使用 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 已经为您完成了这项工作。您只需要设置容器的最大宽度 class。这样做有助于保持页面布局的一致性。 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>

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

Putting a max-width and aligning text in the middle of parent

html

css

twitter-bootstrap

twitter-bootstrap-3